【JavaScript】实现星级评论
我们在网购的时候，经常看见给商品评论五星好评，那么这个星级评论是怎么实现的呢？
文章目录
- 一、实现效果展示
- 二、实现代码
一、实现效果展示
二、实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.active {color: red;}</style></head><body><div class="wrapper"><span class="active">❤</span><span>❤</span><span>❤</span><span>❤</span><span>❤</span></div><script>var _wrapper = document.querySelector(".wrapper");var _spans = document.querySelectorAll("span");_wrapper.onclick = function(event) {//寻找事件源var target = event.srcElement || event.target;if (target.nodeName == "SPAN") {//找到span对应点击的indexvar index = Array.from(_spans).findIndex(function(tag) {return tag == target;})//index之前的添加active，index之后的取消for (var i = 0; i < _spans.length; i++) {if (i <= index) {_spans[i].className = "active";} else {_spans[i].className = "";}}}}</script></body>
</html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！