第二次修改之后的代码点击星星不亮了只亮本来的两颗什么毛病第一种方式还是可以点亮的
qq_谁_15
2019-04-22 20:50
<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="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">
</script>
<script>
(function () {
var num=2,
$rating=$("#rating");
$item=$rating.find(".rating-item");
// 点亮
var lightOn=function(num){
$item.each(function(index){
if(index < num){
// $(this).css("backgroundPosition","0 0");
$(this).css("backgroundPosition","0 -68px");
}else{
$(this).css("backgroundPosition","0 0");
}
});
};
// 初始化
lightOn(num);
// 绑定事件
$rating.on('mouseover','rating-item',function(){
//将子元素rating-item委托给父元素rating
lightOn($(this).index()+1);
}).on('click','rating-item',function(){
num=$(this).index()+1;
}).on('mouseout',function() {//事件绑定
lightOn(num);
});
})();
</script>
</body>
1回答
-
- qq_韩俞_0
- 2019-05-14 14:50:34
$rating.on方法的第二个参数是一个对象，应该是.rating-item而不是rating-item
星级评分原理和实现（上）
25809 学习 · 109 问题
相似问题