星级评分本质上是两种星星图片之间的转换。
代码如下(五角星(1).png是指空白五角星图,五角星.png是指选中的五角星图):
<div class="wrap">
<div class="score">
<img src="五角星(1).png" alt="">
<img src="五角星(1).png" alt="">
<img src="五角星(1).png" alt="">
<img src="五角星(1).png" alt="">
<img src="五角星(1).png" alt="">
</div>
<span></span>
</div>
js代码:
var imgs = document.getElementsByTagName('img')
var text = document.getElementsByTagName('span')[0]
for (var i = 0; i < imgs.length; i++) {
imgs[i].i = i
imgs[i].onclick = function () {
//获取当前出发元素索引值
var index = this.i
//清空样式,先清空后添加
for (var k = 0; k < imgs.length; k++) {
imgs[k].src = '五角星(1).png'
}
for (var j = index; j >= 0; j--) {
imgs[j].src = '五角星.png'
}
if (this.i === 0) {
text.innerHTML = '非常差'
} else if (this.i === 1) {
text.innerHTML = '差'
} else if (this.i === 2) {
text.innerHTML = '一般'
} else if (this.i === 3) {
text.innerHTML = '好'
} else {
text.innerHTML = '非常好'
}
}
}