星级评论===>>>html+js+封装js代码

这里是HTML代码：

<div class="star">
        <ul>
            <li>
                <span>服务态度</span>
                <div class="smstar">
                    <span class="on"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </li>
            <li>
                <span>物流服务</span>
                <div class="smstar">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </li>
            <li>
                <span>商品评价</span>
                <div class="smstar">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </li>
        </ul>
    </div>

下面是封装前的Js代码：

$(function(){
    var star = $('.smstar');
    var list = star.find('span');
    var index = 3;//定义初始化的星星数量
    setStarByIndex(index);//调用初始化星星的数量
    list.hover(function(){
        var index = $(this).index();//鼠标移上时不会改变，所以要用局部变量
        setStarByIndex(index);
    },function(){
        setStarByIndex(index);//鼠标移出时获取全局变量，和下面的click相互对应
    }).click(function(){
        index = $(this).index();
        //这里只写了index的值，但没有调用函数，是因为当鼠标
        //点击时，也相当于鼠标移动上去了，不同在于，点击后会将当前获取的局部变量的值替换
        //外面的全局变量，当鼠标移除时也自然会调用函数，将新的index值传入进去就实现效果了
    });
    function setStarByIndex(index){
        //下面两句话为啥写在一起就没有效果呢？
        list.eq(index).addClass('on').prevAll().addClass('on');
        list.eq(index).nextAll().removeClass('on');
        //是因为上面的一句中pervAll(),它获取到的是复数，代表前面的所有span
        //如果后面直接接上nextAll()，会代表所有的span每个后面的所有span都去掉类on
        //第一个span后面的都去掉类on，然后第二个span后面的都去掉类on，…… 以此类推
        //最后显示的效果就是只剩下第一个
    }
});

效果图：

封装之后的代码：

;//防止语法出错
(function($,win){//虚参
    var Star = function(selector, index){
        //这是一个Star对象，初始化它的属性
        this.index = index;
        this.stars = $(selector);
        this.list = this.stars.find('span');
        this.on = 'on';
        //调用方法

        this.setStarByIndex(this.index);
        this.hoverEvent();
        this.clickEvent();
    };

    //给Star.prototype，增加扩展，将下面的1个对象里面3个方法合并到里面去
    $.extend(true, Star.prototype, {
        hoverEvent: function(){
            var _this = this;
            this.list.hover(function(){
                _this.setStarByIndex($(this).index())
            },function(){
                _this.setStarByIndex(_this.index)
            });
        },
        clickEvent: function(){
            var _this = this;
            this.list.click(function(){
                _this.index = $(this).index();
            });
        },
        setStarByIndex: function(index){
            if(index < 0){
                this.list.removeClass(this.on);
            } else {
                this.list.eq(index).addClass(this.on).prevAll().addClass(this.on);
                this.list.eq(index).nextAll().removeClass(this.on);
            }
        }
    });

    //定义Star对象的静态方法
    Star.init = function(lists, index){
        //将全局的this保存一下
        //因为我们传进来的是一个对象，当each遍历时也会存在一个this，两者会冲突
        var _this = this;
        lists.each(function(key, item){
            //这里的_this如果不是上面重新保存的话，就会冲突
            //因为这里我们要new 一个对象处理啊，报错会说，this不是构造函数，不能new
            new _this(item, index);
            //console.log(item);//这里输出的话，显示的就是三个类.smstar的div
        });
    };

    //通过window全局变量添加对外借口，让外部可以访问内部的变量
    win['Star'] = Star;
})(jQuery,window);//实参

//Star相当于对象,它调用自身的静态方法
Star.init($('.smstar'),-1);