这里是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);