Звезды рейтинга 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 вместо 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'); 
     } 
     }, 

Что касается дублирования кода, один первый шаг мог бы создать один или больше вспомогательных функций, в которых вы определяете дублируемую логику. Но, возможно, вам следует подумать о том, как сделать вашу логику более общей. Вы должны быть способны достичь одинаковой функциональности только с одним прислужником и одним кликом-слушателем.