<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>
$rating.on方法的第二个参数是一个对象，应该是.rating-item而不是rating-item