Question

我有四个课程show，hide1，hide2和hide3。我想更改每个类，并将其替换为旁边的类。换句话说，我的jQuery代码看起来像这样......

$(".show").removeClass("show").addClass("hide1");
$(".hide1").removeClass("hide1").addClass("hide2");
$(".hide2").removeClass("hide2").addClass("hide3");
$(".hide3").removeClass("hide3").addClass("show");

问题是四个类最终都有show class，这不是我想要的。我只是希望show的类转换为hide1，hide1转换为hide2等。我怎样才能编写代码以便这四行全部一次发生，而不是一次发生一次？

Answer 1

首先选择每个组，然后更改：

// read
var $show = $('.show');
var $hide1 = $('.hide1');
var $hide2 = $('.hide2');
var $hide3 = $('.hide3');

// write
$show.removeClass('show').addClass('hide1');
$hide1.removeClass('hide1').addClass('hide2');
$hide2.removeClass('hide2').addClass('hide3');
$hide3.removeClass('hide3').addClass('show');

Answer 2

这样做，

function circulateClass(c){
    var i, cl=[];
    for(i=0;i<c.length;i++)
        cl[c[i]]=$("."+c[i]);

    for(i=0;i<c.length;i++)
        cl[c[i]].removeClass(c[i]).addClass(c[(i+1)%c.length]));
}

circulateClass(["show","hide1", "hide2", "hide3"]);

Answer 3

如果将类保存在这样的数组中：

var classes = ['show','hide1','hide2','hide3'];

你可以做这样的花哨的东西：

$('.'+classes.join(',.')).attr('class', function(i) {
   return classes[i+1] || classes[0];
});

演示：http://jsfiddle.net/7DuEV/

Answer 4

只需更改订单......

$(".show").removeClass("show").addClass("hide1");
$(".hide3").removeClass("hide3").addClass("show");
$(".hide2").removeClass("hide2").addClass("hide3");

对于最后一个，按类名过滤：

$(".hide1").filter(function(){
    return !$(this).hasClass('show');
}).removeClass("hide1").addClass("hide2");

Answer 5

jsBin demo

c = 0; // zero based index n (set initial one)

var $el = $( '#parent' ).find( 'div' );
$el.hide().eq( c ).show();

$( '#button' ).click( function() {
   $el.hide().eq( ++c % $el.length ).show(); 
});

一次转换类

5 个答案:

jsBin demo