<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>星级评分</title>
<!--网页图标logo-->
<!-- <link rel="favicon icon" href="images/favicon/favicon.ico" type="images/x-icon" /> -->
<!-- Bootstrap -->
<!-- <link href="css/common.css" rel="stylesheet">
<link href="css/swiper-4.4.1.min.css" rel="stylesheet">
栅格布局css
<link href="css/flex.css" rel="stylesheet"> -->
<!--index-->
<link rel="stylesheet" href="css/index.css"/>
</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 src="js/jquery-1.11.0.min.js" ></script>
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> -->
<script src="js/swiper-4.4.1.jquery.min.js"></script>
<!-- 通用js-->
<script src="js/usual.js"></script>
<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 -30px');
} 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>
你的图片怎么设置的啊
原来是这里出了问题
$item = $rating.find('.rating-item');
另外我的控制台没有报任何错误