第二次修改之后的代码点击星星不亮了只亮本来的两颗什么毛病第一种方式还是可以点亮的
<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>
