为了账号安全,请及时绑定邮箱和手机立即绑定

代码一样,星星无变化

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

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



正在回答

2 回答

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
星级评分原理和实现(上)
  • 参与学习       25812    人
  • 解答问题       109    个

本课程主要讲解如何使用不同的方式来实现星级评分的效果.

进入课程

代码一样,星星无变化

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信