                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /星级评分原理和实现（上）

为什么星星不变化

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>星级评分第一种实现方式</title>
<style>

   body,ul,li{
       padding:0;
       margin:0;
   }
   li{
       list-style: none;
   }

   .rating{
       width:175px;
       height:35px;
       margin:100px auto;
   }

   .rating-item{
       float:left;
       width:35px;
       height:35px;
       background: url(dark.png)no-repeat;
       cursor: pointer;
   }

</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
   <ul class= "rating" id = "rating">
       <li class="rating-item" title="1"></li>
       <li class="rating-item" title="2"></li>
       <li class="rating-item" title="3"></li>
       <li class="rating-item" title="4"></li>
       <li class="rating-item" title="5"></li>
   </ul>

<script>
   var num = 2,
       $rating = $('#rating'),
       $item = $rating.find('.rating-item');

   //点亮
   var lightOn = function(num){
       $item.each(function(index){
           if(index < num){
               $(this).css('background-possion','0 -40px');
           }else{
               $(this).css('background-possion','0 0');
           }

       });
   };

   //初始化
   lightOn(num);

   //事件绑定
   $item.on('mouseover',function(){
       lightOn($(this).index() + 1);
   }).on('click',function(){
       num = $(this).index() + 1;
   });

   $rating.on('mouseout',function(){
       lightOn(num);
   });

</script>
</body>
</html>