史上最精简jquery实现秒懂的星星评分代码_jquery星级评分兼容安卓-优快云博客

本文链接：https://blog.youkuaiyun.com/u013103102/article/details/52740778

本文介绍了一个使用HTML、CSS及jQuery实现的简单星级评分插件。该插件通过鼠标点击来改变星星图标的状态，实现对内容的评分，并实时显示已选分数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.1.0/jquery.js"></script>
<style type="text/css">
.box{
width:300px;
height:40px;
background:red;
}
li{
height: 40px;
width:40px;
background: url('star.png');
background-repeat: no-repeat;
background-size: 25px 25px;
list-style: none;
background-position: center;
float: left;
cursor: pointer;
}
#score{
color:red;
margin-top:20px;
}
</style>
</head>
<body>
<div class="box" id="star0" score="">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<div id="score"></div>
<script type="text/javascript">

$(".box li").click(function(){
var index = $(this).index();
$(this).parent().attr("score",index+1);
var parentId = $(this).parent().attr("id");
$("#"+parentId).find("li").css("background-image","url('star.png')");
for(var i=0;i<=index;i++){
$("#"+parentId).find("li").eq(i).css("background-image","url('star_active.png')");
}
var score = $("#"+parentId).attr("score");
$("#score").text("您选择的分数是:"+score+"分");
});

</script>
</body>
</html>