Найпростіший спосіб переключити 2 класи в jQuery

Якщо у мене є клас .A і клас .B і хочу переключитися між натисканням кнопки, яке приємне рішення для цього в jQuery? Я досі не розумію, як це toggleClass()працює.

Чи є вбудоване рішення, щоб його застосувати onclick=""?

Якщо ваш елемент відкриває клас Aз самого початку, ви можете написати:

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

Це видалить клас Aта додасть клас B. Якщо ви зробите це ще раз, він видалить клас Bта відновить клас A.

Якщо ви хочете відповідати елементам, які відкривають будь-який клас, ви можете скористатися селектором декількох класів і написати:

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

Ось спрощена версія: ( хоч і не елегантна, але зручна у виконанні )

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

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

});

Як варіант, подібне рішення:

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

Я створив плагін jQuery для роботи 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);
  });
};

Ви можете просто спробувати тут, скопіювати та запустити це на консолі, а потім спробувати:

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

Ваш onClickзапит:

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

Спробуйте: https://jsfiddle.net/v15q6b5y/

Просто JS à la jQuery :

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

Ось ще один «нетрадиційний» спосіб.

• Він передбачає використання підкреслення або подачі .
• Він передбачає контекст, коли ви:
  • елемент не має класу init (це означає, що ви не можете робити toggleClass ('a b'))
  • ви повинні дістати клас динамічно звідкись

Прикладом цього сценарію можуть бути кнопки, які мають клас перемикання на інший елемент (скажімо, вкладки в контейнері).

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

Найпростіше рішення - це toggleClass() обидва класи індивідуально.

Скажімо, у вас є ікона:

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

Для перемикання між режимами fa-angle-downі fa-angle-upвиконайте наступні дії :

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

Оскільки у нас було fa-angle-downна початку без fa-angle-upкожного перемикання обох, один залишає, щоб з’явився другий.

Перемикайтеся між двома класами "A" і "B" за допомогою Jquery.

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