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

Si tengo la clase .A y la clase .B y quiero cambiar entre hacer clic en el botón, ¿cuál es una buena solución para eso en jQuery? Todavía no entiendo cómo toggleClass()funciona.

¿Existe una solución en línea para ponerlo en onclick=""evento?

Si su elemento expone la clase Adesde el principio, puede escribir:

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

Esto eliminará la clase Ay agregará clase B. Si vuelve a hacer eso, eliminará la clase By restablecerá la clase A.

Si desea hacer coincidir los elementos que exponen cualquiera de las clases, puede usar un selector de clase múltiple 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 jQuery para trabajar DRY:

$.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);
  });
};

Puede probarlo aquí, copiar y ejecutar esto en la consola y luego intentar:

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

Su onClicksolicitud:

<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>

Pruébalo: https://jsfiddle.net/v15q6b5y/

Solo el JS à la jQuery :

$('.selector').toggleClass('A', !state).toggleClass('B', state);

Aquí hay otra forma 'no convencional'.

• Implica el uso de guión bajo o lodash .
• Asume un contexto donde usted:
  • el elemento no tiene una clase init (eso significa que no puede hacer toggleClass ('a b'))
  • tienes que obtener la clase dinámicamente desde algún lugar

Un ejemplo de este escenario podría ser botones que tienen la clase que se debe activar en otro elemento (digamos pestañas en un contenedor).

// 1: define the array of switching classes:
var types = ['web','email'];

// 2: get the active class:
var type = $(mybutton).prop('class');

// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);

La solución más fácil es para toggleClass()ambas clases individualmente.

Digamos que tienes un ícono:

    <i id="target" class="fa fa-angle-down"></i>

Para alternar fa-angle-downy fa-angle-uphacer lo siguiente:

    $('.sometrigger').click(function(){
        $('#target').toggleClass('fa-angle-down');
        $('#target').toggleClass('fa-angle-up');
    });

Como teníamos fa-angle-downal principio sin fa-angle-upcada vez que alternabas ambos, uno se va para que aparezca el otro.

Alternar entre dos clases 'A' y 'B' con Jquery.

$ ('# selecor_id'). toggleClass ("A B");