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");
});

第二个点击处理程序（#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

有很多不同的方法可以做到这一点，具体取决于你想要达到的目标的逻辑细节。

我选择将其解释如下：

每当点击输入时，运行测试
如果是#diff，请提醒我们，或
如果是.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");
}

请参阅Sample

覆盖具有不同功能的选择器回调

4 个答案: