js写星星评价

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";

            }

        }

    }

 

效果如下