Question

我正在为我的网站创建自己的星级评分系统。用户可以选择1-5颗星之间的任何地方。

我们的想法是，用户必须点击星标才能选择评分，所有点击的星标都会突出显示，包括点击的星标。

在幕后，每个星星都有一个单选按钮。当用户点击星标时，单选按钮会被选中。

但是，我想在mouseenter上突出显示星标，如果用户没有点击，则mouseout上的星标应重置为单选按钮所代表的默认值。

我不确定如何最好地实现这一点，而且我当前的代码也会出现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);

在检查之前设置所有元素的样式

2 个答案: