[ 仿某团评价打分评论字数限制 ]

实现原理

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

nextAll用法

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

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

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>

i.active{ color：#f18d00; }

<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>

Javascript — Oct 11, 2017