【分享】淘宝商品评分示例

无图无真相,先看效果图:

接下来是代码实现部分，比较简单，自己看：
HTML 部分

    <div class="icons" >  
        <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>

为每个星星节点添加index索引,方便获取当前所点击元素

JavaScript 部分

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 "星好评";  
})

已开源，提交至Github，地址： https://github.com/qhhsy/pingfen