JS 如何制作评论下的五角星_五角星评论组件

作者：笔触狂放9 | 2024-02-15 13:49:40

踩

五角星评论组件

代码展示：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span class="star"><img src="./img/星星.png"></span>
		<span class="star"><img src="./img/星星 (1).png"></span>
		<span class="star"></span>
		<span class="star"></span>
		<span class="star"></span>
		<script>
			var _star = document.getElementsByClassName("star");
			for (let i = 0; i < _star.length; i++) {
				_star[i].innerHTML = localStorage.getItem(`img${i}`) || `<img src="./img/星星.png">`;
				_star[i].onclick = function() {
					//找到点击的下标
					var index = -1;
					for (var j = 0; j < _star.length; j++) {
						if (_star[j] == this) {
							index = j;
							break;//当找到正确的索引之后，就不再循环（减少冗余量）
						}
					}
					// 设置图片
					for (var k = 0; k < _star.length; k++) {
						if (k <= index) {
							_star[k].innerHTML = `<img src="./img/星星 (1).png">`;
						} else {
							_star[k].innerHTML = `<img src="./img/星星.png">`;
						}
					}
				}
			}
		</script>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/84995