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

Question

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

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

Answer 1

要素が最初からクラスを公開する場合Aは、次のように記述できます。

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

これにより、 class が削除され、 classAが追加されBます。もう一度行うと、 class が削除され、 class がB元に戻りAます。

いずれかのクラスを公開する要素を一致させたい場合は、複数の クラス セレクターを使用して次のように記述できます。

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

Answer 2

これは簡略化されたバージョンです: (エレガントではありませんが、簡単に理解できます)

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

Answer 3

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

// usage example:
$(document.body).on('click', () => {
  $(document.body).toggle2classes('a', 'b')
})

body{ height: 100vh }
.a{ background: salmon }
.b{ background: lightgreen }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Click anywhere

Answer 4

最も簡単な解決策は、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

Answer 5

ここに別の「型にはまらない」方法があります。

• これは、アンダースコアまたはロダッシュの使用を意味します。
• 次のようなコンテキストを想定しています。
  • 要素に初期化クラスがない (つまり、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);