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

Question

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

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

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

});

Answer 1

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

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

但是，它要求数组包含 DOM 元素，而不是 jQuery 对象。您可以使用 .get() 将 jQuery 集合转换为元素数组。由于您将获得嵌套数组，因此您可以使用.flat() 将其展平。对于 ID 选择器，这并不是真正需要的，因为您可以使用 .get(0) 选择第一个元素，但下面的方法可以推广到多个元素的集合。

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

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

<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>

Answer 2

解决方案 #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 3

在 JQuery 中，您可以使用与 CSS 中相同的符号来影响多个元素，只需使用逗号分隔它们即可。

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