星级评分原理和实现

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)