实现原理:

1 选中当前星星添加active样式,并为其兄弟元素添加active样式
2 通过nextAll属性去掉当前点击之后的样式

nextAll用法:

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。

如果给定一个表示DOM元素集合的jQuery对象,.nextAll()方法允许我们搜索DOM树中的元素跟随的同胞元素,
并用匹配元素构造新的 jQuery 对象。

    ** ------------------------ html --------------------------- **
    div class="starts customer-star">
    <span>
        <i class="iconfont icon-xingxing1 active"></i>
        <i class="iconfont icon-xingxing1 active"></i>
        <i class="iconfont icon-xingxing1 active"></i>
        <i class="iconfont icon-xingxing1 "></i>
        <i class="iconfont icon-xingxing1 "></i>
    </span>
    <textarea name="" onkeyup="words_deal();" placeholder="项目完成后请对项目进行评价(100字内)"></textarea>
    <div class="tips customer-tip"><span>0</span>/100个字</div> 
    </div>

    ** ------------------------ css --------------------------- **
    i.active{
    color:#f18d00;
    }

    ** ------------------------ jquery --------------------------- **
    <script>
    //评价字数限制
    function words_deal(){ 
        var curLength = $(".customer-star textarea").val().length; 
        if(curLength > 100){ 
            var num = $(".customer-star textarea").val().substr(0,100); 
            $(".customer-star textarea").val(num); 
            alert("超过字数限制,多出的字将被截断!" ); 
        }else{ 
            $(".tips span").text(100-$(".customer-star textarea").val().length); 
        } 
    } 
    //星星打分
    $('.customer-star .iconfont').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().addClass('active');
        $(this).nextAll().removeClass('active');
    })
    </script>

 
请输入图片描述

文章目录