Question

当处理具有多个选择器的jQuery事件时，我是否可以获得选择器触发事件的值？

我知道jQuery multiple selectors, get which selector triggered event和类似问题，但似乎没有一个问题包含对基本问题的回答。

假设我有3个按钮：

<button class='red stop danger'>red</button>
<button class='amber floor-it caution'>amber</button>
<button class='green go safe'>green</button>

附带的Javascript代码：

var clickCounts = {
    red: 0,
    green: 0
};

// we only want to count red and green clicks
$('.red, .green').click(function() {
    // can't use clickCounts[$(this).attr('class')] 
    // because there are multiple class values present
    clickCounts[??selector??] += 1;
});

如果实现这一目标的唯一方法是通过对is()或hasClass()进行大量调用，或者按下按钮处理程序等等，那么就这样吧，但我还没有看到明确的答案。

Answer 1

如果你想要每个按钮数，
我个人会将其存储在数据属性中：

$('.red, .green').click(function() {
    lastCount = $(this).data('clicks') || 0;
    $(this).data('clicks', lastCount +1);
});

如果您想要全局红/绿计数，
我会做两个独立的处理程序：

var clickCounts = {
    red: 0,
    green: 0
};

$('.red').click(function() {
    clickCounts.red += 1;
});

$('.green').click(function() {
    clickCounts.green += 1;
});

如果你只是好奇，
抱歉，我没有关于如何获取jquery事件的触发选择器的实际答案;我建议posting an issue

Answer 2

您可以使用Element.matches()和（对于旧浏览器）Element. matchesSelector。例如：

$('.red, .green').click(function (e) {
    var sel;
    if ( e.target.matches && e.target.matches('.red') ||
         e.target. matchesSelector && e.target. matchesSelector('.red')) {
        sel = 'red';
    } else {
        sel = 'green';
    }
    clickCounts[sel] += 1;
});

Answer 3

为什么不对按钮应用ID，并将其用作选择器而不是类？

<button class='red stop danger' id="red">red</button>
<button class='green go safe' id="green">green</button>

然后：

$('#red, #green').click(function() { clickCounts[$(this).attr('id')] += 1; });

Answer 4

你可能想试试这个：

http://jsfiddle.net/w3z3bfp4/1/

<button name='red' class='red stop danger'>red</button>
<button class='amber floor-it caution'>amber</button>
<button name='green' class='green go safe'>green</button>

$('.red, .green').click(function(e) {
clickCounts[e.target.name] += 1;
alert('RED '+clickCounts.red);
alert('GREEN '+clickCounts.green)
});

具有多个选择器的事件 - 如何获取触发选择器？

4 个答案: