mui实现评价星星点亮

总共5颗星，点击哪个就把前面几个星星都高亮。

首先，遍历5颗星，v-for=‘n in 5’ ，然后星星用图片img标签或背景。

然后，这个星星图片是关键，它是由灰色和高亮色两个图组成的一个图标。

最后，点击的时候就判断当前星星是不是小于等于点击的数量编号。如果等于就把这颗星加上light类，这个light类就是让星星显示图标的高亮色部分。
http://www.bslxx.com/m/view.php?aid=2163

    机舱环境
    
    
    
    
    

``

$(".icons_envirnment").on("click","i",function(e){
    var index=$(this).index()+1;  //
    var max=$(".icons_envirnment i:last").index()+1;
   	for(var i=1;i<=max;i++){
       $(".icons_envirnment i:nth-child("+i+")").addClass("mui-icon-star-filled"); 
    }
    for(var i=index+1;i<=max;i++){ 
        $(".icons_envirnment i:nth-child("+i+")").removeClass("mui-icon-star-filled");
    }
    $('#commentEnvironmentValue').val($(this).index());
});

源码

    
    
    
    
    
    



    

        
        

            
            
            
评价
            
        

        

            

                

                    
 机舱环境
                
                

                    

                    
                
            
            

                

                    
 服务态度
                
                

                    

                
            
            

                

                    
 用餐口味
                
                

                    

                
            
        

        


    


    
    
    
    

vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
https://www.jb51.net/article/149712.htm