代码一样，星星无变化
代码检查了几遍，星星还是没反应
<!DOCTYPE html>
<html>
<head>
<title>星级评分--第一种实现方式</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
.rating{width:130px;height:26px;margin:100px auto;}
.rating-item{float:left;width:26px;height:26px;background:url(rating.png) no-repeat;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>
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 -26px');
}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>
