jquery实现三星打分
html部分:
<div class="star-box">
<p class="f14">请为周二日志打分:</p>
<span class="star">
<i class="fa fa-star "></i>
</span>
<span class="star">
<i class="fa fa-star"></i>
</span>
<span class="star">
<i class="fa fa-star"></i>
</span>
<input type="text" value="0" id="star_rank" name="rank[]" style="display: none;">
</div>
js部分:
$('.star-box').on('click','.star',function(){
var _parent = $(this).parent();
var _item = _parent.find('span');
var _index = $(this).index();
// 取消 打0星
if(_index==1){
if($(this).is('.light')&&!$(this).siblings('.star').is('.light')){
$(this).removeClass('light');
_parent.find('input').attr('value',0);
return;
}
}
// 其他打分
for (var i = 0; i < _item.length; i++) {
if (i < _index) {
_item[i].classList.add('light');
} else {
_item[i].classList.remove('light');
}
}
_parent.find('input').attr('value',_index);
})