没效果显示啊？

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

没效果显示啊？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星级评分</title>
    <style>
 body,ul,li{
            padding:0;
 margin:0;
 }
        li{list-style-type:none;}
        .rating{
            width:300px;
 height:58px;
 margin:100px auto;
 }
        .rating-item{
            display:inline-block;
 width:58px;
 height:58px;
 margin-right:-8px;
 background: url("01.PNG")no-repeat;
 cursor:pointer;
 }
    </style>
    <script src="https://apps.bding.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<ul id="rating" class="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;
 var $rating = $('#rating');
 var  $item = $rating.find('.rating-item');
 //点亮
 var lightOn=function(num){
        $item.each(function(index){//找到ul里的li，each每个li遍历一遍
 if(index < num){
                $(this).css('background-position','0 -68px');
 }
            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>

提问者：夜阑卧听风吹雨y 2018-07-25 15:57

个回答

郎友侯

2018-08-03 23:26:10

已采纳
```
你的这个jquery库地址不对，<script src="https://apps.bding.com/libs/jquery/2.1.4/jquery.min.js"></script>
```
，你可以到控制台上看一下报的错误，会提示 Uncaught ReferenceError: $ is not defined
试试这个地址<script src='https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js'></script>

1