jQuery removeClass(function(index, class))

返回值:jQueryremoveClass(function(index, class))概述

从所有匹配的元素中删除全部或者指定的类。

参数 function(index, class)Function

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例描述:

删除最后一个元素上与前面重复的class

jQuery 代码:$('li:last').removeClass(function() {
return $(this).prev().attr('class');

});

实例分析：

我们经常需要有这样的tab切换。

tab里面每个背景不一样，每个tab的当前背景也不一样。移动到相应的tab里面相应的内容显示出来。

代码如下：

$(function(){
var links = $('#tab a');
var content = $('.show');
var currentIdx = 0;
links.hover(function(){
var currentIdx = links.index(this);
content.hide();
links.removeClass(function(index){
return ('a' + (index) + 'hover');
});
$(this).addClass('a' + (currentIdx) + 'hover');
$(content[currentIdx]).show();
});
})

这就是简单的tab切换效果。

这里的亮点就是移除当前的样式， 通过索引在这个集合中的索引值来实现。

links.removeClass(function(index){
return ('a' + (index) + 'hover');
});

但是，我们有时候还会加一个需求，当没有任何交互的时候，这个tab自己轮播。也就是要加个定时器。这个好说。

但是自动轮播的情况就要想到如果轮播到最后一张，则自己换到第一张。还有一种情况就是当有交互的时候，自己轮播不是从第一张开始，而是从交互的下一张开始轮播，这才合理。

代码如下：

首先自己轮播的代码：

function autoShow(){
var currentIdx = links.index(links.filter(function(index) {
return $(this).hasClass('a' + (index) + 'hover');
}));//在这里记住当前有样式的地方
content.hide();
links.removeClass(function(index){
return ('a' + (index) + 'hover');
});
currentIdx++;
if (currentIdx >= $(links).size()) {
currentIdx = 0;
} //如果是最后一张的情况
$(links).eq(currentIdx).addClass('a' + (currentIdx) + 'hover');
$(content[currentIdx]).show();
};

接着加上计时器：

var timer = setInterval(autoShow, 2000);

当有交互的时候要去掉这个计时器。当交互完成的时候启动计时器。

最后完整的代码如下：

$(function(){
var links = $('#tab a');
var content = $('.show');
var currentIdx = 0;
var timer = setInterval(autoShow, 2000);
links.hover(function(){
if(timer) clearInterval(timer);
var currentIdx = links.index(this);
content.hide();
links.removeClass(function(index){
return ('a' + (index) + 'hover');
});
$(this).addClass('a' + (currentIdx) + 'hover');
$(content[currentIdx]).show();
},
function(){
timer = setInterval(autoShow, 2000);
});

function autoShow(){
var currentIdx = links.index(links.filter(function(index) {
return $(this).hasClass('a' + (index) + 'hover');
}));
content.hide();
links.removeClass(function(index){
return ('a' + (index) + 'hover');
});
currentIdx++;
if (currentIdx >= $(links).size()) {
currentIdx = 0;
}
$(links).eq(currentIdx).addClass('a' + (currentIdx) + 'hover');
$(content[currentIdx]).show();
};
})

大功告成。2010年的最后一天上班。大家新年快乐！工作顺心。