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

クラス.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
});

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

あなたの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);

ここに別の「非従来型」の方法があります。

• これは、アンダースコアまたはロダッシュの使用を意味します。
• 次のような状況を想定しています。
  • 要素に初期化クラスがない（つまり、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両方をトグルする必要がなかったので、片方はもう片方が表示されます。

Jqueryで2つのクラス「A」と「B」を切り替えます。

$（ '＃selecor_id'）。toggleClass（ "A B"）;