有大佬能看一下么，我這沒有效果，默認點亮也沒有，雪碧圖24*46的，上半是空星
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星級評分</title>
<style>
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
/* 標記樣式，調為無*/
}
.rating{
width:130px;
height: 26px;
margin: 100px,auto;
}
.rating-item{
float: left;
width: 24px;
height: 23px;
background-image:url("photo/454927978387472504.png");
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 src="環境/jquery-3.4.1.min.js"></script>
<script>
var num = 2;
$item = $("#rating").find(".rating-item");
var lightOn = function(){
//找到$("#rating")find后代的所有(".rating-item")進行循環遍歷each
$item.each(function(index){
if(index < num){
$(this).css("backgroun-position","-23px,0")
? ?}
else{
$(this).css("backgroun-position","+23px,0")
}
});
}
lightOn(num);//默認兩星
//mouseenter移入，mouseleave移出
//開始綁定事件
$item.on("mouseenter",function(){
lightOn($(this).index()+1);//給點亮傳入參數
}).on("mouseleave",function(){
lightOn(num);//給點亮傳入原始默認參數,將其恢復
});
$("#rating").on("click",function(){
num = lightOn(($(this).index())+1);//找到當前star索引值+1并執行點亮操作,不賦值num會進行沖突？
});
</script>
</body>
</html>
2019-12-30
background-position? 少了個D