jquery - 用不同的功能覆盖选择器回调

Question

我有一组输入：

<input class="test"></input>
<input class="test"></input>
<input class="test"></input>
<input id="diff" class="test"></input>

当用户单击这些输入时，一些 jQuery 会做一些事情：

$(function () {
    $(".test").on("click", function () {
        alert("test");
    });
    $("#diff").on("click", function () {
        alert("diff");
    });
});

目前，第 4 个文本框将显示两个警报。如何“覆盖”默认警报“测试”以仅说“差异”？

非常感谢。

小提琴：http: //jsfiddle.net/G3PAy/

非常感谢。

Answer 1

我认为没有办法指定不同处理程序的优先级，因此您需要在第一次单击处理程序中明确排除它：

$(".test:not(#diff)").on("click", function () {
    alert("test");
});

第二个点击处理程序（for #diff）保持原样。

Answer 2

让我感到震惊的是，您可能以错误的方式进行此操作。

我首先认为您应该尝试设计您的标签，使#diff 标签不具有相同的类。一种方法是将相同的 CSS 规则应用于新类，如下所示：

.test
{
/* CSS rules */
}

变成

.text, .newClass
{
/* new CSS rules */
}

但是，如果您不想这样做，您可以针对 jQuery 中的其他属性进行测试。

您可以使用以下代码来实现您想要的结果：

$(function () {
    $(".test").on("click", function () {
        if( !$(this).is("#diff"){
        alert("test");
        }
    });
    $("#diff").on("click", function () {
        alert("diff");
    });
});

Answer 3

有许多不同的方法可以做到这一点，具体取决于您要实现的逻辑细节。

我选择将其解释如下：

1. 每当单击输入时，运行测试
2. 如果是#diff，请提醒我们，或者
3. 如果是.test，请提醒我们

如此有效地进行了一系列测试，并且某些条件会覆盖其他条件。为此，您使用 jQuery 运行一个通用选择器，然后使用 else if 逻辑语句来确定操作过程。

此处修改代码：

$(function () {
    $("input").on("click", function () {
        if($(this).is('#diff')){
            alert("diff");
        }
        else if($(this).is('.test')){
            alert("test");
        }
    });
});

在这里演示：http: //jsfiddle.net/barney/QkrbK/

Answer 4

尝试使用event.stopImmediatePropagation()进行内联点击事件

<input id="diff" class="test" onclick="show();event.stopImmediatePropagation();"></input>

和

function show() {
    alert("diff");
}

查看示例