62

I have an click event that I want to assign to more than class. The reason for this is that I'm using this event on different places in my application, and the buttons you click have different styling in the different places.

What I want is something like $('.tag' '.tag2'), which of course don't work.

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

        else {
             // and here
        }
    });
holyredbeard
  • 19,619
  • 32
  • 105
  • 171

7 Answers7

124

Approach #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);

Approach #2

This will also work:

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

Fiddle

I prefer a separate function (approach #1) if there is a chance that logic will be reused.

See also How can I select an element with multiple classes? for handling multiple classes on the same item.

Community
  • 1
  • 1
Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • In the first example you don't need `$('.tag2').click(doSomething);` cause it's obvious that there's a COMMON class `.tag` for both/or/more elements but just specific ones `clickedTag` http://jsbin.com/ukiguf/2/edit – Roko C. Buljan May 09 '12 at 07:56
  • @RokoC.Buljan - the OP says "I have an click event that I want to assign to more than class." I'm showing a way to do that. It's not clear to me whether or not there is a common class assigned to all the elements in question. If that's the case, the approach would still work. – Tim M. May 09 '12 at 07:58
  • 1
    Exactly, the more than one are: `.tag` and `.clickedTag` ;) All right. +1 from me (P.S: OP need votes more that we do. [you ever needed to Bounty a Question?] ) – Roko C. Buljan May 09 '12 at 07:59
  • 1
    Second approach is what I was looking for Thanks – maiakd May 17 '23 at 13:39
11

You can select multiple classes at once with jQuery like this:

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

Giving a 2nd parameter to the $() function, scopes the selector so $('.tag', '.tag2') looks for tag within elements with the class tag2.

James Simm
  • 1,569
  • 1
  • 16
  • 28
7
    $('.tag1, .tag2').on('click', function() {

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

   });

or

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

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

or

 $('[class^=tag]').on('click', dothing);
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
5

It's like this:

$('.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
}
fmsf
  • 36,317
  • 49
  • 147
  • 195
1

Have you tried this:

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

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

This is wrong:

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

This works:

​$(".tag1").add(".tag2").click(function(){
   alert("clicked");    
});​
starball
  • 20,030
  • 7
  • 43
  • 238
Rémi Borderie
  • 1