Jquery显示单击的图像和文本

Question

我试图显示当前的评等图像，例如，当用户单击所需的评等并让它停留在该评等上，直到用户选择不同的评等时，它连同它的评等定义一起显示。

或者，当用户在没有选择(单击)其他评等值的情况下悬停于其他评等值时，让评等跳回用户当前选择的评等。

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

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;
}

Answer 1

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

$(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'))
    });
});

我还在data-desc中添加了.rate元素的初始描述。

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

查看jsFiddle

Answer 2

分别添加change事件，以便checkbox在鼠标离开后维护“分级”文本。

$(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

Answer 3

这应该:改变评级，直到一个被点击(鼠标上方)。当一个人被点击(选择)，然后它保持该评级，直到它被改变。

$(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/