星星评价

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

    <form class="form-group">
                <div class="form-control mui-table-view-cell">
                    <label>评分</label>
          
          <div class="icons mui-inline" style="margin-left: 6px;">
                        <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>
                <div class="form-control">
                    <label>评价</label>
                    <textarea class="form-control" rows="5" placeholder="请输入您对该商品的评价..."></textarea>
                </div>
                
                <div style="margin: 20px 15px;">
                        <button style="background-color: #FF663E; color:#FFFFFF;padding:5px 0px; border: 1px solid #E2E2E2;" type="submit" class="mui-btn mui-btn-danger mui-btn-block">提交</button>
                    </div>
            </form>

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写的

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

<div class="star">
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star-filled"></span>
             </div>

我写的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");
;   比索引大的都是没有选的，颜色白色。
            });