代码一样，星星无变化-慕课网

代码一样，星星无变化

来源：3-2 最基本的JS写法--JS的第一次尝试

蒹葭苍沧

2019-08-13 23:45

代码检查了几遍，星星还是没反应

<!DOCTYPE html>
<html>
    <head>
    <title>星级评分--第一种实现方式</title>
    <meta charset="utf-8" />
    <style>
        *{margin:0;padding:0;}
        ul li{list-style:none;}
        .rating{width:130px;height:26px;margin:100px auto;}
        .rating-item{float:left;width:26px;height:26px;background:url(rating.png) no-repeat;cursor:pointer;}
    </style>
</head>
<body>
<!-- 第一种实现方式 -->
    <ul class="rating" id="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></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-position','0 -26px');
                   }else{
                       $(this).css('background-position','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>

写回答关注