我遇到了这个简单的星级评分系统,字体很棒。我有一个问题。在一个有多个星 block 进行评级的页面中,它们都会同时被调用。我怎样才能防止这种行为,并且只有预期的 block 来应用点击的星星?
fiddle : http://jsfiddle.net/VGx6r/
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();
最佳答案
这是因为:
var $star_rating = $('.star-rating .fa');
它将函数应用于每个星级评级类。
您需要修改该选择器以指定要更改的选择器。您可以将元素传递到 setStarRating
例子:
return SetStarRating($(this));
然后在 SetRatingStar
方法中使用它
回应您的评论。我感觉很慷慨,所以给你:
关于javascript - JS 中可重用类的多个 $this 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23667390/