Najłatwiejszym sposobem przełączania 2 klas w jQuery

Jeśli mam klasę .A i klasę .B i chcę przełączać się między kliknięciem przycisku, jakie jest dobre rozwiązanie w jQuery? Nadal nie rozumiem, jak to toggleClass()działa.

Czy istnieje jakieś rozwiązanie na miejscu, aby to zrobić onclick=""?

Jeśli twój element odsłania klasę Aod samego początku, możesz napisać:

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

Spowoduje to usunięcie klasy Ai dodanie klasy B. Jeśli zrobisz to ponownie, usunie klasę Bi przywróci klasę A.

Jeśli chcesz dopasować elementy eksponujące dowolną klasę, możesz użyć selektora wielu klas i napisać:

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

Oto uproszczona wersja: ( choć nie elegancka, ale łatwa do naśladowania )

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

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

});

Alternatywnie podobne rozwiązanie:

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

Zrobiłem wtyczkę jQuery do pracy 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);
  });
};

Możesz po prostu spróbować tutaj, skopiować i uruchomić to w konsoli, a następnie spróbować:

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

Twoja onClickprośba:

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

Wypróbuj: https://jsfiddle.net/v15q6b5y/

Tylko JS à la jQuery :

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

Oto inny „niekonwencjonalny” sposób.

• Oznacza to użycie podkreślenia lub lodash .
• Zakłada kontekst, w którym:
  • element nie ma klasy init (co oznacza, że ​​nie można przełączać klasy („a b”))
  • musisz skądś uzyskać klasę dynamicznie

Przykładem tego scenariusza mogą być przyciski, w których klasę można włączyć na innym elemencie (np. Tabulatory w kontenerze).

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

Najłatwiejszym rozwiązaniem jest dla toggleClass()obu klas indywidualnie.

Powiedzmy, że masz ikonę:

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

Aby przełączyć między fa-angle-downi fa-angle-upwykonaj następujące czynności:

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

Ponieważ mieliśmy fa-angle-downna początku, bez fa-angle-upkażdorazowego przełączania obu, jedno wychodzi, aby drugie się pojawiło.

Przełączaj się między dwiema klasami „A” i „B” za pomocą Jquery.

$ ('# selecor_id'). toggleClass („A B”);