Самый простой способ переключения 2 классов в jQuery

Если у меня есть класс .А и класс .B и хотите переключаться между нажатием кнопки on, какое хорошее решение для этого в jQuery? Я до сих пор не понимаю, как toggleClass() строительство.

есть ли встроенное решение, чтобы поместить его в onclick="" событие?

187
jquery toggleclass

6 ответов

если ваш элемент предоставляет class A С самого начала, вы можете написать:

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

это удалит класс A и добавить класс B. Если вы сделаете это снова, он удалит class B и восстановить класс A.

если вы хотите сопоставить элементы, которые предоставляют любой класс, вы можете использовать несколько селектор класса и пишем:

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

вот упрощенная версия: (хотя и не элегантно, но легко следовать)

$("#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
});
30

Я сделал плагин jQuery для сухой работы:

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

вот еще один "нетрадиционный" способ.

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

код 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);
1

самое простое решение -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 каждый раз, когда вы переключаете оба, один оставляет для другого, чтобы появиться.

-1