html
<div class="zxpj_list"> <div class="zxpj_main"> <span>*</span> <span>设计水平:</span> <div class="zxpj_item"> <img src="themes/img/kbjz/zximg1.svg" alt="分数" class="scoreImg " data-index='1' onclick="scoreFunc(event)" /><img src="themes/img/kbjz/zximg1.svg" alt="分数" class="scoreImg " data-index='2' onclick="scoreFunc(event)" />
<img src="themes/img/kbjz/zximg1.svg" alt="分数" class="scoreImg " data-index='3' onclick="scoreFunc(event)" />
<img src="themes/img/kbjz/zximg1.svg" alt="分数" class="scoreImg " data-index='4' onclick="scoreFunc(event)" />
<img src="themes/img/kbjz/zximg1.svg" alt="分数" class="scoreImg " data-index='5' onclick="scoreFunc(event)" /> </div> </div> </div> css .zxpj_list { display: flex; justify-content: space-between; }
.zxpj_main { display: flex; align-items: center; }
.zxpj_item { display: flex; justify-content: space-between; width: 20%; }
.zxpj_item img { display: block; width: 28px; height: 28px; } js //评分使用的变量 ScoreBl = true; scoreI = null; scoreImgs = []; // 点击进行评分 function scoreFunc(event) { if (ScoreBl) { scoreImgs = document.getElementsByClassName('scoreImg'); } var e = event || window.event; var target = e.target || e.srcElement; var x = target.getAttribute('data-index'); // 点击后的分数存放在变量nowI里了 var nowI = parseInt(x, 10); var i; if (nowI != scoreI) { scoreI = nowI; for (i = 0, len = scoreImgs.length; i < len; i++) { scoreImgs[i].src = "themes/img/kbjz/zximg1.svg"; } for (i = 0; i < nowI; i++) { scoreImgs[i].src = "themes/img/kbjz/zximg2.svg"; }
} else { scoreI = 0; for (i = 0, len = scoreImgs.length; i < len; i++) { scoreImgs[i].src = "themes/img/kbjz/zximg1.svg"; } } } 效果如下
![](/i/l/?n=23&i=blog/2140136/202303/2140136-20230303154625657-731105106.png)
标签:星星,nowI,img,scoreI,len,js,scoreImgs,var,评价 From: https://www.cnblogs.com/yangcaicai/p/17175883.html