Jquery 评分星星无法正常工作

Question

以下代码是一个简单的星级评分系统的html。

<div class="review-stars clearfix" id="featured">
   <fieldset data-component-bound="true" class="star-rating-widget">
      <legend class="offscreen">Rating</legend>
      <ul class="stars-0">
         <li>
            <input id="rating-1" name="rating" value="1" type="radio">
            <label for="rating-1">1 (Eek! Methinks not.)</label>
         </li>
         <li>
            <input id="rating-2" name="rating" value="2" type="radio">
            <label for="rating-2">2 (Meh. I've experienced better.)</label>
         </li>
         <li>
            <input id="rating-3" name="rating" value="3" type="radio">
            <label for="rating-3">3 (A-OK.)</label>
         </li>
         <li>
            <input id="rating-4" name="rating" value="4" type="radio">
            <label for="rating-4">4 (Yay! I'm a fan.)</label>
         </li>
         <li>
            <input id="rating-5" name="rating" value="5" type="radio">
            <label for="rating-5">5 (Woohoo! As good as it gets!)</label>
         </li>
      </ul>
      <p class="description">Select your rating.</p>
   </fieldset>
</div>

这里是 jquery -

$(document).ready(function() {
     $('#rating-1').hover(              
               function () {
                  $('#featured ul').removeClass();
                  $('#featured ul').addClass('stars-1');
               }, 

               function () {
                  $('#featured ul').removeClass();
     });
     $('#rating-2').hover(              
               function () {
                  $('#featured ul').removeClass();
                  $('#featured ul').addClass('stars-2');
               }, 

               function () {
                  $('#featured ul').removeClass();
     });
     $('#rating-3').hover(              
               function () {
                  $('#featured ul').removeClass();
                  $('#featured ul').addClass('stars-3');
               }, 

               function () {
                  $('#featured ul').removeClass();
     });
     $('#rating-4').hover(              
               function () {
                  $('#featured ul').removeClass();
                  $('#featured ul').addClass('stars-4');
               }, 

               function () {
                  $('#featured ul').removeClass();
     });
     $('#rating-5').hover(              
               function () {
                  $('#featured ul').removeClass();
                  $('#featured ul').addClass('stars-5');
               }, 

               function () {
                  $('#featured ul').removeClass();
     });

    $('#rating-1').click(function() {
        $('#featured ul').removeClass();
        $('#featured ul').addClass('stars-1');
    });
    $('#rating-2').click(function() {
        $('#featured ul').removeClass();
        $('#featured ul').addClass('stars-2');
    });
    $('#rating-3').click(function() {
        $('#featured ul').removeClass();
        $('#featured ul').addClass('stars-3');
    });
    $('#rating-4').click(function() {
        $('#featured ul').removeClass();
        $('#featured ul').addClass('stars-4');
    });
    $('#rating-5').click(function() {
        $('#featured ul').removeClass();
        $('#featured ul').addClass('stars-5');
    });
});

这里的ul 类对星图的背景位置进行更改。这意味着ul class = "stars-0" 将显示未选中星，ul class = "stars-1" 将显示选中 1 星.....（这不是问题）。当人们将鼠标悬停在任何单选按钮上时，相应的类将被添加到 ul 并且再次悬停时它将被删除，单击时会发生同样的情况。到目前为止，它工作正常。但是一旦检查了一个收音机，那么 mouseout 事件就不能保持ul 的类处于活动状态。我怎样才能做到这一点。还有一件事，我写的 jquery 似乎有很多代码。有什么办法可以减少线路和优化。在此先感谢

Answer 1

您可以添加一个条件来检查是否已经在单选组上选择了一个值，如下所示：

 $('#rating-1').hover(              
     function () {
         if (!$("input:radio[name ='rating']:checked").val()){
              $('#featured ul').removeClass();
              $('#featured ul').addClass('stars-1');
         }
      },

对于代码重复，第一步可能是创建一个或多个帮助函数，您可以在其中定义重复的逻辑。但也许你应该想办法让你的逻辑更通用。您应该能够只使用一个悬停侦听器和一个单击侦听器来实现相同的功能。

Answer 2

为了减少行和优化，您可以使用通用类 rating 而不是 ids 和数据属性 index 包含每个 li 的索引，如下面的代码。

我知道这不是做你想做的事的完美方式，但它工作正常，使用数据属性checked 来知道是否有任何复选框被选中，checked-value 来存储选中的值所以我们可以在用户悬停时使用它来保留选中的类。

希望这会有所帮助。

$('.rating').hover(              
    function () {
        var index = $(this).data('index');

        $('#featured ul').removeClass();
        $('#featured ul').addClass('stars-'+index);
    }, 
    function () {
        $('#featured ul').removeClass();
        
        if( $('#featured ul').data("checked") )
             $('#featured ul').addClass($('#featured ul').data("checked-value"));
    });

$('.rating').click(function() {
    var index = $(this).data('index');

    $('#featured ul').removeClass();
    $('#featured ul').addClass('stars-'+index);

    $('#featured ul').data("checked", true);    
    $('#featured ul').data("checked-value", 'stars-'+index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review-stars clearfix" id="featured">
   <fieldset data-component-bound="true" class="star-rating-widget">
      <legend class="offscreen">Rating</legend>
      <ul class="stars-0">
         <li>
            <input id="rating-1" data-index="1" class='rating' name="rating" value="1" type="radio">
            <label for="rating-1">1 (Eek! Methinks not.)</label>
         </li>
         <li>
            <input id="rating-2" data-index="2" class='rating' name="rating" value="2" type="radio">
            <label for="rating-2">2 (Meh. I've experienced better.)</label>
         </li>
         <li>
            <input id="rating-3" data-index="3" class='rating' name="rating" value="3" type="radio">
            <label for="rating-3">3 (A-OK.)</label>
         </li>
         <li>
            <input id="rating-4" data-index="4" class='rating' name="rating" value="4" type="radio">
            <label for="rating-4">4 (Yay! I'm a fan.)</label>
         </li>
         <li>
            <input id="rating-5" data-index="5" class='rating' name="rating" value="5" type="radio">
            <label for="rating-5">5 (Woohoo! As good as it gets!)</label>
         </li>
      </ul>
      <p class="description">Select your rating.</p>
   </fieldset>
</div>