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