jQuery带评价的星级打分js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带评价的星级打分js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery带评价的星级打分代码</title>
<link rel="stylesheet" href="css/mytyle.css" />
<style type="text/css">
	*{
		margin: 0;
	}
	.box{
		width: 80%;
		margin:20px auto;
	}
	.list{
		margin: 0 50px;
		width: 30%;
		float: left;
	}
	a{
		font-size: 50px;
		text-decoration: none;
		color: lightgray;
	}
	span{
		font-size: 40px;
		padding-top: 10px;
		margin-left: 50px;
	}
	.c1{
		color: crimson;
	}
	.c2{
		color: goldenrod;
	}
	.c3{
		color: yellow;
	}
	.c4{
		color: orange;
	}
	.c5{
		color: limegreen;
	}
</style>

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/my.js" ></script>

</head>
<body>

<div class="box">
	<div class="list">
		<a href="#" class="star1">★</a>
		<a href="#" class="star2">★</a>
		<a href="#" class="star3">★</a>
		<a href="#" class="star4">★</a>
		<a href="#" class="star5">★</a>
	</div>
	<span class="remark">亲，请客观给出评价~</span>
</div>
</body>
</html>

JS代码(my.js):

$(function(){
	starChange();
}
);
	function starChange(){
	for (var i=1;
	i<=5;
	i++){
	//为每个星星 绑定鼠标移入 移出 事件$(".star"+ i).hover(//鼠标移入function(){
	var index = $(this).attr("class").substr(4,1);
	for (var i= index;
	i>0;
	i--){
	$(".star"+ i).addClass("c" + index);
}
//改变评价样式 及 内容switch(index){
	case "1":$(".remark").addClass("c1").text("垃圾！简直就是垃圾！！！");
	break;
	case "2":$(".remark").addClass("c2").text("糟糕透了！！");
	break;
	case "3":$(".remark").addClass("c3").text("这种东西还好意识拿出来卖？！");
	break;
	case "4":$(".remark").addClass("c4").text("不错，还可以~");
	break;
	case "5":$(".remark").addClass("c5").text("Good~一次愉快的购物体验~");
	break;
}
}
,//鼠标移出function(){
	var index = $(this).attr("class").substr(4,1);
	for (var i= index;
	i>0;
	i--){
	//恢复本身及之前的星星的颜色$(".star"+ i).removeClass("c" + index);
}
//回复 评价$(".remark").removeClass("c" + index).text("亲，请客观给出评价~");
}
);
	//为每个星星 绑定点击事件$(".star"+ i).bind("click",function(){
	var index = $(this).attr("class").substr(4,1);
	//点击之后 解绑本身及之前星星的 所有事件for(var i=1;
	i<=index;
	i++){
	$(".star"+ i).unbind();
}
//将后面的隐藏while(++index <= 5){
	$(".star"+ index).css("display","none");
}
}
);
}
}

CSS代码(mytyle.css):

附件:下载该文件资源,减少时间成本(增值服务)