为一个事件分配多个类

时间:2012-05-09 07:48:10

标签: jquery class events

我有一个点击事件,我想分配给多个类。这样做的原因是我在我的应用程序中的不同位置使用此事件,并且您单击的按钮在不同的位置具有不同的样式。

我想要的是像$('。tag''。tag2'),当然这不起作用。

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

        else {
             // and here
        }
    });

6 个答案:

答案 0 :(得分:89)

方法#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");    
});​

Fiddle

如果有可能重用逻辑,我更喜欢单独的函数(方法#1)。

另请参阅How can I select an element with multiple classes?以处理同一项目上的多个类。

答案 1 :(得分:7)

您可以使用jQuery一次选择多个类:

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

为$()函数提供第二个参数,范围选择器使$('.tag', '.tag2')在具有类tag的元素中查找tag2

答案 2 :(得分:4)

就是这样:

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

答案 3 :(得分:4)

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

答案 4 :(得分:1)

你试过这个:

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

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

答案 5 :(得分:0)

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