mui星級評價模塊

<div class="icons" style="float:left">
    <i data-index="1" class="mui-icon mui-icon-star"></i>
    <i data-index="2" class="mui-icon mui-icon-star"></i>
    <i data-index="3" class="mui-icon mui-icon-star"></i>
    <i data-index="4" class="mui-icon mui-icon-star"></i>
    <i data-index="5" class="mui-icon mui-icon-star"></i>
</div>
<div id="info" style="float:left"></div>

.mui-icon-star{color: #B5B5B5;font-size: 30px;}
.mui-icon-star-filled{color: #FFB400;font-size: 30px;} 
 ul{padding: 10px 0px;}
 li{display: -webkit-box;width: 100%;padding: 0 10px;} 
 li a{-webkit-box-flex: 1;display: block;font-size: 15px;line-height: 30px;color: #000;}
 li div{-webkit-box-flex: 2;text-align: right;}

<script type="text/javascript" charset="utf-8">
    mui.init();
    mui('.icons').on('click','i',function(){
       var index = parseInt(this.getAttribute("data-index"));//獲取當前元素的索引值
       var parent = this.parentNode;//獲取當前元素的父節點
       var children = parent.children;//獲取父節點下全部子元素
       if(this.classList.contains("mui-icon-star")){//判斷當前節點列表中是否含有.mui-icon-star元素
          for(var i=0;i<index;i++){//亮星
              children[i].classList.remove('mui-icon-star');
              children[i].classList.add('mui-icon-star-filled');
          }
       }else{//重置已經亮星的元素
          for (var i = index; i < 5; i++) {
              children[i].classList.add('mui-icon-star')
               children[i].classList.remove('mui-icon-star-filled')
          }
       }
        document.getElementById("info").innerHTML = parent.previousElementSibling.innerText + "："+index+"星好評";
     })
</script>