La forma más fácil de alternar 2 clases en jQuery

Solución:

Si tu elemento expone la clase A desde el principio, puedes escribir:

$(element).toggleClass("A B");

Esto eliminará la clase A y agrega clase B. Si lo hace de nuevo, eliminará la clase. B y restablecer la clase A.

Si desea hacer coincidir los elementos que exponen cualquiera de las clases, puede usar un selector de clases múltiples y escribir:

$(".A, .B").toggleClass("A B");

Aquí hay una versión simplificada: (aunque no elegante, pero fácil de seguir)

$("#yourButton").toggle(function() 
{
        $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'

}, function() {
        $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'

});

Alternativamente, una solución similar:

$('#yourbutton').click(function()
{
     $('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});

He creado un complemento de jQuery para trabajar en SECO:

$.fn.toggle2classes = function(class1, class2){
  if( !class1 || !class2 )
    return this;

  return this.each(function(){
    var $elm = $(this);

    if( $elm.hasClass(class1) || $elm.hasClass(class2) )
      $elm.toggleClass(class1 +' '+ class2);

    else
      $elm.addClass(class1);
  });
};

Puedes probarlo aquí, copiarlo y ejecutarlo en la consola y luego probar:

$('body').toggle2classes('a', 'b');

---

---

Utiliza Nuestro Buscador