评价星星效果

husky花

已于 2024-04-08 17:43:48 修改

阅读量513

点赞数

分类专栏：评价文章标签：电商

于 2017-11-22 10:41:56 首次发布

本文链接：https://blog.csdn.net/hflxia/article/details/78600212

版权

评价专栏收录该内容

1 篇文章 0 订阅

订阅专栏

购物车星星 js原理
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>购物车星星</title>
		<style>
			.evaluate {
				height: 6.1rem;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}

			.evaluate i {
				color: #16191f;
			}

			.evaluate .bi-star-fill {
				color: #ec7211;
			}
		</style>
		<script src="jq.js"></script>
	</head>
	<body>
		<div class="evaluate">
			<span>综合评分</span>
			<span>
				<i class="bi bi-star"></i>
				<i class="bi bi-star"></i>
				<i class="bi bi-star"></i>
				<i class="bi bi-star"></i>
				<i class="bi bi-star"></i>
			</span>
		</div>
	</body>
	<script type="text/javascript">
		$(document).on('click', '.evaluate i', function() {
			var ind = $(this).index();
			// console.log(ind)
			var childs = $(this).parent().find('i');
			$.each($(childs), function() {
				$(this).removeClass('bi-star-fill');
			})
			for (var i = 0; i <= ind; i++) {
				$(childs).eq(i).addClass('bi-star-fill');
				$(childs).eq(i).removeClass('bi-star');
			}
		})
	</script>
</html>