Question

我遇到了这个简单的星级评分系统，字体很棒。我有一个问题。在有多个星级评级的页面中，它们都会同时被调用。如何防止此行为并且仅使用预期的块来应用单击的星星？

HTML

<div class="star-rating"> 
  <span class="fa fa-star-o" data-rating="1"></span>
  <span class="fa fa-star-o" data-rating="2"></span>
  <span class="fa fa-star-o" data-rating="3"></span>
  <span class="fa fa-star-o" data-rating="4"></span>
  <span class="fa fa-star-o" data-rating="5"></span>
  <input type="hidden" name="whatever" class="rating-value" value="3">
</div>

CSS

.star-rating {
  line-height:32px;
  font-size:1.25em;
  cursor: pointer;
}

使用Javascript：

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();

Answer 1

正因为如此：

var $star_rating = $('.star-rating .fa');

它正在将该功能应用于每个星级等级。

您需要修改该选择器以指定要更改的选择器。您可以将元素传递到setStarRating

示例：

return SetStarRating($(this));

然后在SetRatingStar方法

中使用它

回应你的评论。我感觉很慷慨所以你走了：

JSFiddle

JS中可重用类的多个$ this属性

1 个答案: