jquery实现星级评分效果

效果图如下：

html：

<ul id="rating" class="rating">
        <li class="rating-item rating" title="很不好"></li>
        <li class="rating-item rating" title="不好"></li>
        <li class="rating-item rating" title="一般"></li>
        <li class="rating-item rating" title="好"></li>
        <li class="rating-item rating" title="很好"></li>
</ul>
    <ul id="titleText"></ul> //描述文本

css：

   *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .rating{
        height: 26px;
    }
    .rating-item{
        float: left;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background:url(images/rating1.svg) no-repeat;
        background-size:30px;
    }
    .rating-itemYellow{
        float: left;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background:url(images/rating2.svg) no-repeat;
        background-size:30px;
    }

js：

 // 点亮方法
    var rating = (function(){
        var lightOn = function($item,num){
            $item.each(function(index){
                if(index<num){
                    $(this).removeClass('rating-item').addClass('rating-itemYellow')
                }else{
                    $(this).addClass('rating-item').removeClass('rating-itemYellow')
                }
            });
        }
        var init= function(el,num){
            var titleText = "";
            var $rating = $(el),
            $item = $rating.find('.rating');
            // 初始化
            lightOn($item,num);
            // 鼠标移入事件，点击事件，鼠标移出事件
            $rating.on('mouseover','.rating',function(){
                lightOn($item,$(this).index()+1);
                var titleText = $(this).attr('title')
                $('#titleText').text(titleText)
            }).on('click','.rating',function(){
                num = $(this).index()+1;
                titleText = $(this).attr('title')
                $('#titleText').text(titleText) //点击星号后显示对应的文本 
            }).on('mouseout',function(){
                lightOn($item,num);
                $('#titleText').text(titleText)
            });

        };
        $.fn.extend({
            rating:function(num){
                return this.each(function(){
                    init(this,num);
                });
            }
        });
        // 返回一个对象
        return {
            init:init
        };
    })();
// 初始化星号，全部未点亮
    rating.init('#rating',0);

欢迎各位指导交流！