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中，在悬停时，它将再次被移除，在单击相同的happen.Upto时，它将正常工作。但是，一旦检查了收音机，鼠标退出事件就不应该保持ul类的活动。我如何才能做到这一点。还有一件事，我编写的jquery似乎有很多代码。有什么方法可以减少代码行和优化?谢谢。

Answer 1

为了减少行数和优化，您可以使用通用类rating而不是id和数据属性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>

​

Answer 2

您可以添加一个条件，检查是否已经在无线电组中选择了一个值，如下所示：

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

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