星星评价

1，这是mui里面自带的一个用法

js内容

mui('.icons').on('tap','i',function(){
       var index = parseInt(this.getAttribute("data-index"));
       var parent = this.parentNode;
       var children = parent.children;
       if(this.classList.contains("mui-icon-star")){    //点击的那个之前如果由空心的星星变成实心的
           for(var i=0;i<index;i++){
               children[i].classList.remove('mui-icon-star');   //star是空心的星星
               children[i].classList.add('mui-icon-star-filled'); //filled是实心的黄色星星
           }
       }else{
           for (var i = index; i < 5; i++) { //点击的那个之后由实心的星星变成空心的
               children[i].classList.add('mui-icon-star')
               children[i].classList.remove('mui-icon-star-filled')
           }
       }
//打了几颗星呢
   console.log(index);
});

他使用mui写的，我用jquery来写。

$(".icons").on("click","i",function(e){
             var index=$(this).index()+1; 索引都是从0开始的，但是下面要用的nth-child是从1，开始的，所以索引+1
             var max=$(".icons i:last").index()+1;
             console.log(max)
            for(var i=1;i<=index;i++){
                $(".icons i:nth-child("+i+")").addClass("mui-icon-star-filled");
              }
              for(var i=index+1;i<=max;i++){
                 $(".icons i:nth-child("+i+")").removeClass("mui-icon-star-filled");
              }
       })

2，这是我用jquery写的

把上面红色的替换下下面的内容

我写的jquery部分

       $(".star .mui-icon.mui-icon-star-filled").css("color","orange");
           $(".mui-icon.mui-icon-star-filled").click(function(){
               var index=$(this).index();    //获取点击的这个索引
       $(".star .mui-icon.mui-icon-star-filled:lt("+(index+1)+")").css("color","orange"); //比索引小的都是选中的状态颜色变成橘色，包括这个索引的。注意这里index+1..
       $(".star .mui-icon.mui-icon-star-filled:gt("+index+")").css("color","#fff");
;   比索引大的都是没有选的，颜色白色。
           });