web-dev-qa-db-fra.com

Assigner plus d'une classe pour un événement

J'ai un événement de clic que je veux affecter à plus de classe. La raison en est que j'utilise cet événement à différents endroits de mon application et que les boutons sur lesquels vous cliquez ont un style différent selon les endroits.

Ce que je veux, c'est quelque chose comme $ ('. Tag' '.tag2'), qui ne fonctionne bien sûr pas.

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

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

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

Approche # 2

Cela fonctionnera également:

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

violon

Je préfère une fonction séparée (approche n ° 1) s'il y a une chance que la logique soit réutilisée.

Voir aussi Comment sélectionner un élément avec plusieurs classes? pour gérer plusieurs classes sur le même élément.

92
Tim Medora

Vous pouvez sélectionner plusieurs classes à la fois avec jQuery comme ceci:

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

En donnant un second paramètre à la fonction $ (), étend le sélecteur de manière à ce que $('.tag', '.tag2') recherche tag dans les éléments de la classe tag2.

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

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

   });

ou

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

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

ou

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

C'est comme ça:

$('.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

Avez-vous essayé ceci:

 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