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

猜你喜欢

转载自www.cnblogs.com/linxue/p/9480593.html