jQuery: Alternando entre 3 classs (inicialmente)

Eu vi vários posts aqui no SO, mas eles são muito específicos em termos de funcionalidade e estrutura, e o que estou procurando é algo mais universal que eu ou qualquer um possa usar em qualquer lugar.

Tudo que preciso é ter um botão que, quando clicado, possa alternar entre 3 classs. Mas, caso surja o caso de ter que percorrer 4, 5 ou mais classs, o script pode ser facilmente dimensionado.

A partir deste momento eu sou capaz de ‘ciclo’ entre duas classs que é basicamente mais “alternativo” do que andar de bicicleta, então para isso eu tenho:

HTML:

Toggle classs 
...

jQuery:

 $('.toggle').click(function () { $('div').toggleClass('class1 class2'); }); 

Aqui está um simples violino disso.

Agora, você (bem, eu) acho que adicionar uma terceira class ao método funcionaria, mas não:

 $('div').toggleClass('class1 class2 class3'); 

O que acontece é que a alternância começa a acontecer apenas entre as class3 e class3 .

Então é aí que eu tenho o meu problema inicial: Como fazer com que o botão Alternar aumente sequencialmente através de 3 classs?

E então: E se alguém precisar pedalar para 4, 5 ou mais aulas?

Você consegue fazer isso :

 $('.toggle').click(function () { var classs = ['class1','class2','class3']; $('div').each(function(){ this.className = classs[($.inArray(this.className, classs)+1)%classs.length]; }); }); 

Demonstração

Aqui está outra abordagem:

 if ($(this).hasClass('one')) { $(this).removeClass('one').addClass('two'); } else if ($(this).hasClass('two')) { $(this).removeClass('two').addClass('three'); } else if ($(this).hasClass('three')) { $(this).removeClass('three').addClass('one'); } 
 var classs = ['class1', 'class2', 'class3'], currentClass = 0; $('.toggle').click(function () { $('div').removeClass(classs[currentClass]); if (currentClass + 1 < classes.length) { currentClass += 1; } else { currentClass = 0; } $('div').addClass(classes[currentClass]); }); 

Algo assim deve funcionar bem 🙂

Tinker IO link - https://tinker.io/1048b

Eu converti a resposta do user3353523 em um plugin jQuery.

 (function() { $.fn.rotateClass = function(cls1, cls2, cls3) { if ($(this).hasClass(cls1)) { return $(this).removeClass(cls1).addClass(cls2); } else if ($(this).hasClass(cls2)) { return $(this).removeClass(cls2).addClass(cls3); } else if ($(this).hasClass(cls3)) { return $(this).removeClass(cls3).addClass(cls1); } else { return $(this).toggleClass(cls1); // Default case. } } })(jQuery); $('#click-me').on('click', function(e) { $(this).rotateClass('cls-1', 'cls-2', 'cls-3'); }); 
 #click-me { width: 5em; height: 5em; line-height: 5em; text-align: center; border: thin solid #777; margin: calc(49vh - 2.4em) auto; cursor: pointer; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cls-1 { background: #FFAAAA; } .cls-2 { background: #AAFFAA; } .cls-3 { background: #AAAAFF; } 
  
Click Me!

HTML:

 
color sample

CSS:

 .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } 

JS:

 $(document).ready(function() { var colors = ['red', 'yellow', 'green']; var tmp; setInterval(function(){ tmp && $('#example').removeClass(tmp); tmp = colors.pop(); $('#example').addClass(tmp); colors.unshift(tmp); }, 1000); }); 

DEMO

Outra versão que usa classList replace . Não suportado por todos os navegadores ainda.

 var classs = ["class1", "class2", "class3"]; var index = 0; var classList = document.querySelector("div").classList; const len = classs.length; $('.toggle').click(function() { classList.replace(classs[index++ % len], classs[index % len]); }); 
 .class1 { background: yellow; } .class2 { background: orange; } .class3 { background: red; } 
  Toggle classs 
look at me!

Isso funcionou para mim e eu posso empilhar quantos quiser, então envolva facilmente.

 switch($('div.sel_object table').attr('class')) { case "A": $('div.sel_object table').toggleClass('A B'); break; case "B": $('div.sel_object table').toggleClass('B C'); break; case "C": $('div.sel_object table').toggleClass('C D'); break; case "D": $('div.sel_object table').toggleClass('D A'); break; } 

Percorre o índice de classs e alterna de uma para outra.

 var classs = ['border-top','border-right','border-bottom','border-left']; var border = 'border-top'; var index = 0; var timer = setInterval( function() { var callback = function(response) { index = ( ++index == 4 ? 0 : index ); $(element).html("text").toggleClass( border + " " + classs[index] ); border = classs[index]; }; }, 1000 );