Jquery显示点击的图像和文本

Jquery display clicked image and text

本文关键字：图像 文本 显示 Jquery      更新时间：2023-09-26

当用户点击所需评级时，我试图显示当前评级图像，例如三星及其评级定义，并使其保持在该评级上，直到用户选择不同的评级。

或者，当用户悬停在其他评分值上而没有选择（单击）不同的评分时，将评分跳回到用户当前选择的评分。

到目前为止，我只能在用户悬停在评级图像和定义上时显示它们，而不能在用户单击它们时显示。

HTML

<form action="" method="post">
    <ul class="rating notrated">
        <li id="rate-1" data-desc="Bad">
            <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1" />1 star</label>
        </li>
        <li id="rate-2" data-desc="Good">
            <label for="rating-2"><input type="radio" value="2" name="rating" id="rating-2" />2 stars</label>
        </li>
        <li id="rate-3" data-desc="Great">
            <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3" />3 stars</label>
        </li>
        <li id="rate-4" data-desc="Better">
            <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4" />4 stars</label>
        </li>
        <li id="rate-5" data-desc="Best">
            <label for="rating-5"><input type="radio" value="5" name="rating" id="rating-5" />5 stars</label>
        </li>
    </ul>
    <div class="rate">Rate this product</div>
</form>

Jquery

$(document).ready(function(){
    $('.rating li')
    .on('mouseenter touchstart', function() {
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating').prevAll().addBack().addClass('rating-' + classSuffix);
            $('.rating').nextAll().removeClass('notrated');
            $('.rate').text($(this).attr('data-desc'));
    })
    .on('mouseleave touchend', function() {
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix);
            $('.rate').text('Rate this product');
    }); 
});

CSS

.rating{
    height: 30px;
}
.notrated{
    background-image: url('./stars.png');
    background-repeat: repeat-x;
    background-position: 0px 0px;
}
.rating-1{
    background-image: url('./stars.png');
    background-repeat: repeat-x;
    background-position: 0px -30px;
}
.rating-2{
    background-image: url('./stars.png');
    background-repeat: repeat-x;
    background-position: 0px -60px;
}
.rating-3{
    background-image: url('./stars.png');
    background-repeat: repeat-x;
    background-position: 0px -90px;
}
.rating-4{
    background-image: url('./stars.png');
    background-repeat: repeat-x;
    background-position: 0px -120px;
}
.rating-5{
    background-image: url('./stars.png');
    background-repeat: repeat-x;
    background-position: 0px -150px;
}

我对您的代码做了一些修改，并添加了一个点击处理程序。

$(document).ready(function() {
  $('.rating li')
    .on('mouseenter touchstart', function() {
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('.rating').prevAll().addBack().addClass('rating-' + classSuffix);
      $('.rating').nextAll().removeClass('notrated');
      $('.rate').text($(this).attr('data-desc'));
    })
    .on('mouseleave touchend', function() {
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix);
      $('.rate').text($('.rate').attr('data-desc'));
    })
    .on('click', function() {
      $('.rate').attr('data-desc', $(this).attr('data-desc'))
    });
});

我还为.rate元素的data-desc属性添加了初始描述

<div data-desc="Rate this product" class="rate">Rate this product</div>

查看jsFiddle

这应该：改变评级，直到点击一个（鼠标悬停）。当点击（选择）一个时，它会保持该评级，直到它被更改。

$(document).ready(function() {
  $('.rating li').on('mouseenter touchstart', function() {
      var checked = $('input[type=radio]:checked');
      var hasCheck = checked.length;
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('.rating').prevAll().addBack().addClass('rating-' + classSuffix);
      $('.rating').nextAll().removeClass('notrated');
      if (hasCheck) {
        $('.rate').text(checked.parents('li').data('desc'));
      } else {
        $('.rate').text($(this).data('desc'));
      }
    })
    .on('mouseleave touchend', function() {
      var hasCheck = $('input[type=radio]:checked').length;
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix);
      if (!hasCheck) {
        $('.rate').text('Rate this product');
      }
    })
    .on('change click', 'input[type=radio]', function() {
      var checked = $('input[type=radio]:checked');
      var hasCheck = checked.length;
      if (hasCheck) {
        $('.rate').text(checked.parents('li').data('desc'));
      } else {
        $('.rate').text('Rate this product');
      }
    });
});

注意：如果代码发生更改，这也会解决问题：即

$('input[type=radio]').prop("checked", false);
$('input[type=radio]').trigger('change');

在这里玩吧：http://jsfiddle.net/MarkSchultheiss/Lczv8zzj/

为checkbox单独添加change事件，以在鼠标离开后保持"RATED"文本。

$(document).ready(function () {
        var checked = false, checkedElem;
        $('.rating li')
        .on('mouseenter touchstart', function () {
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating').prevAll().addBack().addClass('rating-' + classSuffix);
            $('.rating').nextAll().removeClass('notrated');
            $('.rate').text($(this).attr('data-desc'));
        })
        .on('mouseleave touchend', function () {
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            if (checked) {
                var classSuffix1 = checkedElem.attr('id').split('-')[1];
                $('.rating').prevAll().addBack().addClass('rating-' + classSuffix1);
                $('.rating').nextAll().removeClass('notrated');
                $('.rate').text(checkedElem.closest('li').attr('data-desc'));
            }
            else {
                $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix);
                $('.rate').text('Rate this product');
            }
        });
        $('.rating li input')
        .on('change', function () {
            checkedElem = $(this);
            var classSuffix = checkedElem.attr('id').split('-')[1];
            $('.rating').prevAll().addBack().addClass('rating-' + classSuffix);
            $('.rating').nextAll().removeClass('notrated');
            $('.rate').text(checkedElem.closest('li').attr('data-desc'));
            checked = true;                
        })
    });

更新：

示例Fiddle

相关文章：