jquery制作五星好评插件

最新推荐文章于 2020-10-12 10:22:21 发布

专业前端小白

最新推荐文章于 2020-10-12 10:22:21 发布

阅读量634

点赞数

分类专栏： jquery插件文章标签：五星好评

本文链接：https://blog.csdn.net/qq_41756580/article/details/88871873

版权

jquery插件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果展示：

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>评分</title>
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<style>
			.scoreDiv{
				width: 60%;
				height: 50px;
				line-height: 50px;
				margin: 50px auto;
				padding: 5px 10px;
			}
			.scoreStar{
				width: 100%;
			}
			.scoreStar .star{
				display: inline-block;
				width: 25px;
				height: 25px;
				background: url(img/star1.png);
				background-size: 100% 100%;
				margin-right: 6px;
				cursor: pointer;
			}
			.scoreStar .star .choo{
				display: block;
				width: 100%;
				height: 100%;
				background: url(img/star2.png);
				background-size: 100% 100%;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="scoreDiv">
			<div class="scoreStar">
				<i class="star"><a class="choo"></a></i>
				<i class="star"></i>
				<i class="star"></i>
				<i class="star"></i>
				<i class="star"></i>
			</div>
		</div>

		<script>
			$("div.scoreStar .star").click(function(){ //星星点击事件
				var index = $(this).index();
				var html = '<a class="choo"></a>';
				$("div.scoreStar .star").empty();
				scoreNum = index + 1;
				$("div.scoreStar .star").each(function(i,value){
					if(i<=index){
						$(this).append(html);
					}
				})
			});
		</script>
	</body>
</html>

图片素材：