A maneira mais fácil de alternar 2 classes no jQuery

Se eu tiver a classe .A e a classe .B e quiser alternar entre os cliques no botão, qual é a melhor solução para isso no jQuery? Eu ainda não entendo como toggleClass()funciona.

Existe uma solução em linha para colocá-lo em onclick=""evento?

Se o seu elemento expuser a classe Adesde o início, você pode escrever:

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

Isso removerá a classe Ae a adicionará B. Se você fizer isso novamente, ele removerá a classe Be a restabelecerá A.

Se você deseja combinar os elementos que expõem uma das classes, pode usar um seletor de várias classes e escrever:

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

Aqui está uma versão simplificada: ( embora não seja elegante, mas 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'

});

Como alternativa, uma solução semelhante:

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

Eu criei um plugin jQuery para trabalhar 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);
  });
};

Você pode apenas tentar aqui, copiar e executar isso no console e depois tentar:

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

O seu onClickpedido:

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

Experimente: https://jsfiddle.net/v15q6b5y/

Apenas o JS à jQuery :

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

Aqui está outra maneira 'não convencional'.

• Implica o uso de sublinhado ou lodash .
• Assume um contexto em que você:
  • o elemento não possui uma classe init (isso significa que você não pode fazer toggleClass ('a b'))
  • você tem que pegar a classe dinamicamente de algum lugar

Um exemplo desse cenário pode ser botões com a classe a ser ativada em outro elemento (por exemplo, guias em um contêiner).

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

A solução mais fácil é para toggleClass()ambas as classes individualmente.

Digamos que você tenha um ícone:

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

Para alternar entre fa-angle-downe fa-angle-upfaça o seguinte:

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

Como tínhamos fa-angle-downno começo sem fa-angle-upcada vez que você alternava os dois, um sai para o outro aparecer.

Alterne entre duas classes 'A' e 'B' com Jquery.

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