有大佬能看一下么，我这没有效果，默认点亮也没有，雪碧图24*46的，上半是空星
Float东方未明
2019-12-18 20:03
<!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>
1回答
-
- 长吁短叹
- 2019-12-30 20:53:44
background-position 少了个D
星级评分原理和实现（上）
25809 学习 · 109 问题
相似问题