Javascript 设置之前所有图元的样式：选中

我正在为我的网站创建自己的星级评定系统。用户可以选择1-5颗星之间的任意位置

这个想法是，用户必须点击一颗星星来选择评级，点击的星星上的所有星星都会高亮显示，包括点击的星星

在幕后，我有一个单选按钮为每个明星。当用户单击星星时，单选按钮被选中

但是，我希望在

mouseenter

上突出显示星号，如果用户没有单击，则在

mouseeut

上，星号应重置为单选按钮表示的默认值

我不确定如何最好地实现这一点，我当前的代码也给出了一个

超过最大调用堆栈大小的
错误。不知道为什么。我找不到任何无限循环

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>

JS

.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);
}

$('.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();
   }
});

这里有一个很好的解决方案：
您还必须停止单选按钮触发对父元素的单击：


（添加了一些背景色以查看效果）

这会停止错误，但现在不会单击复选框。知道为什么吗？可以使用：$（this.prop（'checked'，true）；检查一下。见编辑后的答案
$(this).children('radio').prop('checked', true);