javascript - 将相同的处理程序应用于多个 jQuery 对象

Question

我知道我可以$.each将相同的事件处理程序应用于两个不同的 jQuery 对象。我很惊讶不可能有更清晰的语法，例如：

  var $span = $('span');
  var $div = $('div');

  var clickHandler = function () {
    $(this).toggleClass('red');
  }

  $($span, $div).on('click', clickHandler); // <-- Neater syntax
  $([$span, $div]).on('click', clickHandler); // <-- A little worse, but still better than $.each

为什么我尝试过的语法不起作用？有没有比使用更整洁的替代方法$.each？

Answer 1

您可以对多个选择器使用 CSS 语法 - 逗号,：

$('span, div').on('click', clickHandler);

或者，如果您有包含元素的变量，则可以使用add()

$span.add($div).on('click', clickHandler);

Answer 2

$span.add($div).on('click', clickHandler)

add()根据文档，应该做你想做的事。

1. $($span, $div)被解释为$span's 的后代$div。
2. $([$span, $div])期望数组元素是DOMElements，而不是 jQuery 对象（我一直希望这也是可能的）

您可以在jQuery 文档中看到这两种语法的描述

Answer 3

您还可以使用 jQuery 的.add()^链接方法来扩展包装集

$span.add( $div ).on( 'click', clickHandler );

Answer 4

在我看来，您在理解选择器而不是处理程序方面存在问题，就像上面建议的其他人一样：使用；

$('span, div')