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

length jquery

Question

Si tengo clase .A y 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 funciona toggleClass() .

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

Answer 1

Aquí hay otra manera "no convencional".

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

Un ejemplo de este escenario podría ser botones que tengan la clase para activar otro elemento (por ejemplo, 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);

Answer 2

Creé un plugin 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);
  });
};

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

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

Answer 3

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

Digamos que tienes un ícono:

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

Para alternar entre fa-angle-down y fa-angle-up haga lo siguiente:

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

Como teníamos fa-angle-down al principio sin fa-angle-up cada vez que alternábamos ambos, uno se deja para que aparezca el otro.

Answer 4

Si su elemento expone la clase A desde el comienzo, puede escribir:

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

Esto eliminará la clase A y agregará clase B Si lo haces de nuevo, eliminará la clase B y restablecerá la clase A

Si desea hacer coincidir los elementos que exponen ambas clases, puede usar un selector de clases multiple y escribir:

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

Answer 5

Su solicitud onClick :

<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);

Answer 6

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