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代替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>

Jquery评级明星不能正常工作

2 个答案: