web-dev-qa-db-ja.com

jQueryで2つのクラスを切り替える最も簡単な方法

クラス.Aとクラス.Bがあり、ボタンクリックで切り替えたい場合、jQueryでそれに対するいい解決策は何ですか？私はまだtoggleClass()がどのように機能するのか理解していません。

onclick=""イベントに入れるためのインラインソリューションはありますか？

jquerytoggleclass
202
Stewie Griffin

要素が最初からクラスAを公開している場合は、次のように書くことができます。

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

これにより、クラスAが削除され、クラスBが追加されます。もう一度実行すると、クラスBが削除され、クラスAが復元されます。

どちらかのクラスを公開する要素を一致させたい場合は、 multipleclass selector を使用して次のように書くことができます。

$(".A, .B").toggleClass("A B");
466
Frédéric Hamidi

これは単純化されたバージョンです：（エレガントではありませんが、見やすい）

$("#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
});
35
Rion Williams

私はDRYを動かすための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');
4
vsync

あなたの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とjQueryだけ：

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

これは別の「非従来型」の方法です。

  • これは、 アンダースコア または 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);
1
Luca Reghellin