没效果显示啊？
来源：3-2 最基本的JS写法--JS的第一次尝试
夜阑卧听风吹雨y
2018-07-25 15:57
<!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>
写回答
关注
1回答
-
- 郎友侯
- 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>
星级评分原理和实现（上）
本课程主要讲解如何使用不同的方式来实现星级评分的效果.
25809 学习 · 109 问题
相似问题