五星评价案例-原生js和css

五星评价案例

页面展示

<c:choose>
			<c:when test="${item.starNum == 0}">
				<span style="color: red;">❤</span>
			</c:when>
			<c:when test="${item.starNum == 1}">
				<span style="color: red;">❤❤</span>
			</c:when>
			<c:when test="${item.starNum == 2}">
				<span style="color: red;">❤❤</span>
			</c:when>
			<c:when test="${item.starNum == 3}">
				<span style="color: red;">❤❤❤</span>
			</c:when>
			<c:when test="${item.starNum == 4}">
				<span style="color: red;">❤❤❤❤</span>
			</c:when>
			<c:otherwise>
				<span style="color: red;">❤❤❤❤❤</span>
			</c:otherwise>
</c:choose>

评论功能

<div class="dialog" id="commentcontent" style="display: none">
	<font face="幼圆"><b>发起评论</b></font>
	<br>
	<br>
	您的满意程度：
	<span class="aixin">❤</span>
	<input type="hidden" value="1">
	<span class="aixin">❤</span>
	<input type="hidden" value="2">
	<span class="aixin">❤</span>
	<input type="hidden" value="3">
	<span class="aixin">❤</span>
	<input type="hidden" value="4">
	<span class="aixin">❤</span>
	<input type="hidden" value="5">
	<br>
	<br>
	<input type="text" name="commentText" id="commentText"  placeholder="请输入评论..." style="width: 90%;">
	<br>
	<br>
	<input type="button" class="type2" value="确定" onclick="greet()">
	<input type="button" class="type2" value="取消" onclick="closeComment()">	
</div>

js方法

$(".aixin").on("click", function(event) {
			var $c = $(event.target);
			var $inx =$c.next().val();
			staNum = $inx;
			console.log("$inx=",$inx);
			if($inx == 1){
				$c.css("color","red");
				$c.next().next().css("color","#fff");
				$c.next().next().next().next().css("color","#fff");
				$c.next().next().next().next().next().next().css("color","#fff");
				$c.next().next().next().next().next().next().next().next().css("color","#fff");
			} else if($inx ==2){
				$c.prev().prev().css("color","red");
				$c.css("color","red");
				$c.next().next().css("color","#fff");
				$c.next().next().next().next().css("color","#fff");
				$c.next().next().next().next().next().next().css("color","#fff");
			}else if($inx ==3){
				$c.prev().prev().prev().prev().css("color","red");
				$c.prev().prev().css("color","red");
				$c.css("color","red");
				$c.next().next().css("color","#fff");
				$c.next().next().next().next().css("color","#fff");
			}else if($inx ==4){
				$c.prev().prev().prev().prev().prev().prev().css("color","red");
				$c.prev().prev().prev().prev().css("color","red");
				$c.prev().prev().css("color","red");
				$c.css("color","red");
				$c.next().next().css("color","#fff");
			}else if($inx ==5){
				$c.prev().prev().prev().prev().prev().prev().prev().prev().css("color","red");
				$c.prev().prev().prev().prev().prev().prev().css("color","red");
				$c.prev().prev().prev().prev().css("color","red");
				$c.prev().prev().css("color","red");
				$c.css("color","red");
			}
		});