我就想知道我都搞成一模一樣了，星星沒半點反應(yīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>星級評分</title>
<!--網(wǎng)頁圖標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>
<!-- 第一種實現(xiàn)方式 -->
<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>
2019-12-18
你的圖片怎么設(shè)置的啊
2019-10-22
原來是這里出了問題
$item = $rating.find('.rating-item');
2019-10-21
另外我的控制臺沒有報任何錯誤