Question

我知道用逗号分隔选择器列表实际上是将多个选择器绑定到同一个事件或其他事件。所以这不是问题所在。

这里的问题是我想根据点击的选择器做一些一点的事情。

例如，我有两个链接：

<a href="#" data-do="add">Add</a>
<a href="#" data-do="delete">Delete</a>

然后我有一个像这样的选择器：

$('[data-do="add"], [data-do="delete"]').click(function() {
    // do same stuff
});

对于data-do="add"，我想在事件中进行稍微不同的处理。就好像我能以某种方式询问$(this)是否包含 add 然后更改事件中的某些内容并阻止通常的流程。

只知道如何知道在事件中点击了哪个链接，我就能用简单的if语句完成剩下的工作。这里的问题是我不知道该怎么做。

任何帮助都将不胜感激。

Answer 1

事件处理程序中的

this引用了单击的元素，因此您可以使用this来引用所单击的元素

$('[data-do="add"], [data-do="delete"]').click(function () {
    //general code
    if ($(this).data('do') == 'add') {
        //something special
    }
});

Answer 2

$('[data-do="add"], [data-do="delete"]').click(function() {
    if ($(this)).attr("data-do") == "add"){
         // do something for add
    } 
    if ($(this)).attr("data-do") == "delete"){
         // do something for delete
    } 
});

它也适用于“数据”......

$('[data-do="add"], [data-do="delete"]').click(function() {
    if ($(this)).data("do") == "add"){
         // do something for add
    } 
    if ($(this)).data("do") == "delete"){
         // do something for delete
    } 
});

有效吗？：）

Answer 3

$('[data-do="add"], [data-do="delete"]').click(function() {
    var elementType = $(this).data("do") == "add" ? "ADD":"DELETE";
    alert(elementType); //Switch by elementType
});

JS小提琴： http://jsfiddle.net/9n8gp/

Answer 4

$('[data-do="add"], [data-do="delete"]').click(function() {
    // do same stuff

    /* you could use a simple if */
    if (this.dataset.do === 'add') {

    }

    /* or even a more complex switch */
    switch (this.dataset.do) {
       case 'add': 
          /* specific code for add */ 
          break;
       case 'delete': 
          /* specific code for delete */ 
          break;

    }
});

你可以用this.dataset.do读取属性，保存几个jQuery调用。

此处some performance test data-*属性访问

多个jQuery选择器绑定到同一事件，稍有改动

4 个答案: