web-dev-qa-db-ja.com

1つのイベントに複数のクラスを割り当てる

クラス以外に割り当てるクリックイベントがあります。その理由は、アプリケーション内のさまざまな場所でこのイベントを使用しているため、クリックするボタンの場所によってスタイルが異なるためです。

私が欲しいのは$（ '。tag' '.tag2'）のようなもので、もちろん機能しません。

    $('.tag').click(function (){
        if ($(this).hasClass('clickedTag')){
            // code here
        }

        else {
             // and here
        }
    });
jqueryclassevents
49
holyredbeard

アプローチ＃1

function doSomething(){
    if ($(this).hasClass('clickedTag')){
        // code here
    }
    else {
         // and here
    }
}

$('.tag1').click(doSomething);
$('.tag2').click(doSomething);

// or, simplifying further
$(".tag1, .tag2").click(doSomething);

アプローチ＃2

これも機能します：

​$(".tag1, .tag2").click(function(){
   alert("clicked");    
});​

フィドル

ロジックが再利用される可能性がある場合は、別の機能（アプローチ＃1）を使用します。

複数のクラスを持つ要素を選択するにはどうすればよいですか？ を参照して、同じアイテムで複数のクラスを処理してください。

92
Tim Medora

次のようなjQueryを使用して、複数のクラスを一度に選択できます。

_$('.tag, .tag2').click(function() {
    var $this = $(this);
    if ($this.hasClass('tag')) {
        // do stuff
    } else {
        // do other stuff
    }
});
_

$（）関数に2番目のパラメーターを与え、セレクターのスコープを設定して、$('.tag', '.tag2')がクラス_tag2_を持つ要素内でtagを探すようにします。

7
James Simm
    $('.tag1, .tag2').on('click', function() {

      if ($(this).hasClass('clickedTag')){
         // code here
      } else {
         // and here
      }

   });

または

function dothing() {
   if ($(this).hasClass('clickedTag')){
        // code here
    } else {
        // and here
   }
}

$('.tag1, .tag2').on('click', dothing);

または

 $('[class^=tag]').on('click', dothing);
5
thecodeparadox

こんな感じです：

$('.tag.clickedTag').click(function (){ 
 // this will catch with two classes
}

$('.tag.clickedTag.otherclass').click(function (){ 
 // this will catch with three classes
}

$('.tag:not(.clickedTag)').click(function (){ 
 // this will catch tag without clickedTag
}
4
fmsf

これを試しましたか：

 function doSomething() {
     if ($(this).hasClass('clickedTag')){
         // code here
     } else {
         // and here
     }
 }

 $('.tag1, .tag2').click(doSomething);
1
adrien
    $('[class*="tag"]').live('click', function() {
      if ($(this).hasClass('clickedTag')){
         // code here
      } else {
         // and here
      }
   });
0
Thulasiram