史上最精简jquery实现秒懂的星星评分代码

最新推荐文章于 2024-04-20 00:42:24 发布

置顶拉布拉机丶

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量6.6k

点赞数 1

文章标签： js jquery html css 星星评分

本文链接：https://blog.csdn.net/u013103102/article/details/52740778

版权

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

拉布拉机丶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
史上最精简jquery实现秒懂的星星评分代码

Document.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-sty
复制链接

扫一扫