Il modo più semplice per attivare / disattivare 2 classi in jQuery

Se ho una classe .A e una classe .B e voglio passare da un pulsante all'altro, qual è una buona soluzione in jQuery? Ancora non capisco come toggleClass()funziona.

Esiste una soluzione in linea per metterlo in atto onclick=""?

Se il tuo elemento espone la classe Adall'inizio, puoi scrivere:

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

Ciò rimuoverà la classe Ae aggiungerà la classe B. Se lo fai di nuovo, rimuoverà la classe Be ripristinerà la classe A.

Se si desidera abbinare gli elementi che espongono entrambe le classi, è possibile utilizzare un selettore di più classi e scrivere:

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

Ecco una versione semplificata: ( anche se non elegante, ma facile da seguire )

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

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

});

In alternativa, una soluzione simile:

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

Ho creato un plugin jQuery per lavorare a SECCO:

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

Puoi semplicemente provarlo qui, copiarlo ed eseguirlo nella console e quindi provare:

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

La tua onClickrichiesta:

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

Provalo: https://jsfiddle.net/v15q6b5y/

Solo il JS à la jQuery :

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

Ecco un altro modo "non convenzionale".

• Implica l'uso di underscore o lodash .
• Presuppone un contesto in cui:
  • l'elemento non ha una classe init (ciò significa che non puoi fare toggleClass ('a b'))
  • devi prendere la classe in modo dinamico da qualche parte

Un esempio di questo scenario potrebbe essere rappresentato dai pulsanti con la classe da attivare su un altro elemento (ad esempio le schede in un contenitore).

// 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 soluzione più semplice è per toggleClass()entrambe le classi individualmente.

Diciamo che hai un'icona:

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

Per passare da una all'altra fa-angle-downe fa-angle-upprocedere come segue:

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

Dal momento che abbiamo avuto fa-angle-downall'inizio senza fa-angle-upogni volta che si attivano entrambi, uno parte per l'altro apparire.

Passa tra due classi 'A' e 'B' con Jquery.

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