多个元素变量的jquery事件处理程序

Question

这样的事情可能吗？ 我有多个变量设置为DOM元素，而不是再次命中DOM来设置事件处理程序，我想使用我已经设置的变量。

var a = $("#foo");
var b = $("#bar");

a,b.on("click", function() {

});

Answer 1

解决方案＃1

您可以使用.add()来链接缓存的元素。

var a = $("#foo");
var b  = $("#bar");

(a).add(b).on("click", function() {
  alert('Handler registered');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">Foo</button>
<button id="bar">Bar</button>

解决方案＃2

当您处理多个缓存元素时，正如Barmar建议的那样，更优雅的解决方案是将它们作为数组传递给$()。

但是，请注意只传入缓存的jQuery对象的第一项，这样才能实际定位DOM元素本身，而不是jQuery包装器对象。

var a = $("#foo");
var b = $("#bar");
var c = $("#biz");


$([a[0], b[0], c[0]]).on("click", function() {
  alert('Handler registered');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">Foo</button>
<button id="bar">Bar</button>
<button id="biz">Biz</button>

Answer 2

在JQuery中，您可以使用与CSS相同的表示法来填充多个元素，只需使用逗号分隔它们。

$('#foo, #bar').on("click", function () {})

Answer 3

您可以使用数组作为$()的参数，它将创建一个包含所有内容的新集合。它没有再次击中DOM。

$([a, b]).on("click", function() {
    ...
});

＆＃13;

＆＃13;

var a = $('#foo');
var b = $('#bar');

$([a, b]).on("click", function() {
    alert('Does this work?');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo"> Foo </button>
<button id="bar"> Bar </button>

＆＃13;

＆＃13;

＆＃13;