dom实现类似淘宝的星级评分-蒲公英云

dom实现类似淘宝的星级评分

星级评分本质上是两种星星图片之间的转换。
代码如下（五角星(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 = '非常好'
                }
            }
        }