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();
});

事件监听器同时为少数元素

3 个答案: