为了账号安全,请及时绑定邮箱和手机立即绑定
关注
蒹葭苍沧

代码一样,星星无变化

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

<!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>



最佳回答

2019-08-17

没有引入jQuery库,在</head>之前插入jQuery即可

回复 0

哦哦,我后来也发现了,谢谢哈

2019-08-21
回复 0

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信