从所有匹配的元素中删除全部或者指定的类。
参数 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年的最后一天上班。大家新年快乐!工作顺心。