html:
<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>
css:
.rating{width:130px; height:30px; float:left; margin:30px auto;}
.rating .rating-item{width:26px;height:26px;}
js:
var num = 2;
rating = $("#rating"),
item = rating.find(".rating-item");
var lightOn = function(num){
item.each(function(i){
if(i < num ){
$(this).css("background-position","0 -25px");
}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);
})
//事件委托，.rating-item委托给父元素rating
rating.on("mouseover",".rating-item",function(){
lightOn($(this).index()+1);
}).on("click",".rating-item",function(){
num = $(this).index() +1;
}).on("mouseout",function(){
lightOut(num);
});
var init = function （el,num）{
var rating = el,
item = rating .find(".rating-item");
};
return {init:init};
var rating = (function (){
将那些代码放进来
})();
rating.init("#rating",2);
rating.init("#rating",3);
//jquery 插件
$.fn.extend({
rating:function(num){
return this.each(function(){
init(this,num);
})
}
})
调用：$(".rating").rating(2)