js写星星评价

标签：星星 nowI img scoreI len js scoreImgs var 评价

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";             }         }     }   效果如下

 

 

     

标签：星星,nowI,img,scoreI,len,js,scoreImgs,var,评价
From： https://www.cnblogs.com/yangcaicai/p/17175883.html