Стиль все элементы до: checked

Question

Я создаю свою собственную рейтинговую систему для своего сайта. Пользователь может выбирать между 1-5 звездами.

Идея состоит в том, что пользователю нужно щелкнуть по звездочке, чтобы выбрать рейтинг, и все звезды, оставшиеся на одно нажатой, будут подсвечены, включая щелчок звезды.

За кулисами у меня есть переключатель для каждой звезды. Радиокнопка выбирается, когда пользователь нажимает на звезду.

Тем не менее, я хочу, чтобы звезды выделялись на mouseenter, и если пользователь не нажимает, то на mouseout звезды должны сбросить значение по умолчанию, представленное переключателем.

Fiddly fiddle

Я не уверен в том, как этого достичь, и мой текущий код делает также дает ошибку Maximum call stack size exceeded. Не знаю, почему. Я не могу найти никаких бесконечных циклов.

HTML

<div class="starrating-container"> 
    <div class="star"><input type="radio" name="star-radio" value="1" hidden></div> 
    <div class="star"><input type="radio" name="star-radio" value="2" hidden></div> 
    <div class="star"><input type="radio" name="star-radio" value="3" hidden></div> 
    <div class="star"><input type="radio" name="star-radio" value="4" hidden></div> 
    <div class="star"><input type="radio" name="star-radio" value="5" hidden></div> 
</div> 

CSS

.starrating-container { 
    display: inline-block; 
} 

.star { 
    float: right; 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    background-image: url('http://www.timelinecoverbanner.com/cliparts/wp-content/digital-scrapbooking/lemon-star-md1.png'); 
    background-size: cover; 
    -webkit-filter: saturate(0); 
} 

JS

$('.star').on({ 
    'mouseenter': function() { 
     $(this).nextAll().andSelf().css('-webkit-filter', 'saturate(1)'); 
     $(this).prevAll().css('-webkit-filter', 'saturate(0)'); 
    }, 
    'mouseleave': function() { 
     $(this).siblings().find(':radio').each(function() { 
     if($(this).val() > $('.star input[name=radioName]:checked').val()) { 
      $(this).nextAll().andSelf().css('-webkit-filter', 'saturate(1)'); 
      $(this).prevAll().css('-webkit-filter', 'saturate(0)'); 
     } 
     }); 
    }, 
    'click': function() { 
     $(this).children(':radio').click(); 
    } 
}); 

Answer 1

Вот отличное решение: Accessible star rating widget with pure CSS

Answer 2

вы должны остановить радиокнопку от запуска нажмите на родительский элемент тоже:

http://jsfiddle.net/pz2dey7u/4/ (добавлены некоторые цвета фона, чтобы увидеть эффект)

$(this).children('radio').prop('checked', true);