2013-03-04 26 views
1

我有一组输入:覆盖使用不同功能的选择回调

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

目前第四文本框将显示两个警报。我如何'覆盖'默认警告说“测试”只是说“差异”?

非常感谢。

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

非常感谢。

+0

的。测试点击功能:如果($(本).attr( '身份证')= '差异'!){警报( “测试”);} // @ – dmoss18 2013-03-04 16:39:30

+0

dmoss18:那倒工作,但它似乎比在jQuery中使用.is()功能更脆弱。 – Jeff 2013-03-04 16:43:45

回答

2

我不认为有来指定不同的处理程序的优先级的方式,所以你需要在第一个单击处理程序明确排除:

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

第二次单击处理程序(#diff)保持原样它是。

+0

只要浏览器支持该格式的CSS选择器,此功能就可以工作。我认为jQuery将确保这些选择器即使在旧的浏览器上也能正常工作,对吧? – Jeff 2013-03-04 16:50:05

+0

jQuery有它自己的选择器处理器,它不依赖于浏览器。 – Barmar 2013-03-04 16:50:50

+0

我以为是。谢谢! – Jeff 2013-03-04 16:51:35

1

它让我感到你可能会以这种错误的方式去做。

我首先想到你应该尝试去设计你的标签,使#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"); 
    }); 
}); 
1

有许多不同的方法可以做到这一点,取决于你想要达到什么样的逻辑细节。

我选择把它解释为:

  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/

+0

这适用于给定的输入,是真的,但在我看来,问题更多地是关于如何将某些东西应用于一个类并排除满足另一个标准的特定元素。这将不需要为每个输入点击运行jQuery。 – Jeff 2013-03-04 16:45:47

+0

当我意识到问题开始“我有一组输入”时,我最初的想法是测试'.test,#diff'作为选择器。我认为从条件声明中分离出接受标准是消除逻辑挑战的好方法。总而言之,jQuery选择器可能是最容易处理的事情 - 我怀疑解释器会改变它们太麻烦了。 – Barney 2013-03-04 16:53:10

1

尝试event.stopImmediatePropagation()

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

而且

在线点击事件

Sample

+0

如果还有其他应该运行的功能,但这种功能可能会发生意想不到的后果。 – Jeff 2013-03-04 17:50:46