jquery - 一次监听几个元素的事件监听器

Question

有没有办法一次为几个元素添加监听器？

我目前正在做的是

$('#test1').on('click', function(event) {
    doSomething();
});
$('#test2').on('click', function(event) {
    doSomething();
});
$('#test3').on('click', function(event) {
    doSomething();
});

如您所见，所有三个 ID 都在触发相同的功能。如何组合代码，这样我就不需要为每个侦听器复制代码？

Answer 1

你可以这样做：

$('#test1, #test2, #test3').on('click', function(event) {
   doSomething();
});

---

或者为每个类添加一个类并使用它：

$('.some-class').on('click', function(event) {
   doSomething();
});

---

或者为了更好的衡量，委托（假设它们都以相同的东西开始）：

$('body').on('click', '[id^=test]', function(event) {
   doSomething();
});

Answer 2

为什么不 ...

var all = [ "#test1", "#test2", "#test3" ];
for (var i = 0; i < all.length; i++) { 
  $(all[i]).on('click', function (event) { 
    doSomething();
  });
}

Answer 3

如果它们是容器中的某种类型或添加一个类，最好的方法是可能全部选择它们。

第一个例子：

<div class="box">
  <a href="" id="test1">Test</a>
  <a href="" id="test1">Test</a>
  <a href="" id="test1">Test</a>
</div>

JS：

$('.box a').on('click', function(event) {
    doSomething();
});

或者添加一个类：

<a href="" id="test1" class="button">Test</a>
<a href="" id="test1" class="button">Test</a>
<a href="" id="test1" class="button">Test</a>

JS：

$('.button').on('click', function(event) {
    doSomething();
});