如何将 jQuery 事件处理程序应用于多个缓存的选择器?
Posted
技术标签:
【中文标题】如何将 jQuery 事件处理程序应用于多个缓存的选择器?【英文标题】:How to apply a jQuery event handler to multiple cached selectors? 【发布时间】:2013-02-04 19:43:47 【问题描述】:假设我有三个按钮
<button data-action="grow" class="resizeButton">Grow</button>
<button data-action="shrink" class="resizeButton">Shrink</button>
<button id="normalButton">Normal Button</button>
我在变量中有按钮
var $normalButton = $('#normalButton');
var $growButton = $('.resizeButton[data-action="grow"]');
var $shrinkButton = $('.resizeButton[data-action="shrink"]');
现在假设我想将mouseenter
、mouseleave
和click
事件处理程序连接到普通按钮
$normalButton.on(
mouseenter: function()
//do some stuff
,
mouseleave: function()
//reverse some stuff
,
click: function()
//do some more stuff
);
神奇的 jQuery 向导让我们可以完成这项工作。
现在假设我们想将mouseenter
、mouseleave
和click
事件处理程序附加到增长按钮和收缩按钮。这些按钮的处理程序相同,但普通按钮的处理程序不同。
我可以看到有几种方法可以做到这一点,但它们基本上都是相同的想法,只需将它们分配两次,一次分配给第一个按钮,一次分配给下一个按钮。
所以,
var handlers =
mouseenter: function()
//do some different stuff
,
mouseleave: function()
//reverse some different stuff
,
click: function()
//do some more different stuff
;
$growButton.on(handlers);
$shrinkButton.on(handlers);
或
$.each([$growButton, $shrinkButton], function(i, el)
el.on(
mouseenter: function()
//do some different stuff
,
mouseleave: function()
//reverse some different stuff
,
click: function()
//do some more different stuff
);
);
但我想知道是否有一种语法可以从中创建一个 jQuery 对象,或者只是将处理程序应用于一组缓存的选择器,如 $([$growButton, $shrinkButton]).on(...
或类似的?
【问题讨论】:
【参考方案1】:你可以使用add
方法:
$growButton.add($shrinkButton).on(...)
【讨论】:
除此之外,您可能希望您的代码更加动态,例如,将所有元素推入一个数组,然后将事件应用于所有元素。您可以:只需使用$( arrayOfJqueryObjects )
。
@gustavohenke 当您可以使用add
时,您为什么要这样做?使用类似var jqObjs = $("#el1"); jqObjs.add($("#el2")); jqObjs.add($("#el3"));
的东西 - 当然,在这种情况下,传递给 add 的各个东西将是现有的 jQuery 对象。它也比处理数组更易于维护。以上是关于如何将 jQuery 事件处理程序应用于多个缓存的选择器?的主要内容,如果未能解决你的问题,请参考以下文章