Самый простой способ переключить 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);

Вот еще один «нетрадиционный» способ.

• Это подразумевает использование подчеркивания или lodash .
• Это предполагает контекст, в котором вы:
  • элемент не имеет класса 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");