如何为多个jQuery按钮变量绑定统一点击事件？

Hey there! 我来帮你搞定这个问题～你之前的写法无效是因为对jQuery的$(selector, context)语法理解有点偏差，这个语法里第二个参数是查找上下文，不是用来合并多个jQuery对象的，所以你那样写其实是在btnTwo和btnThree的范围内查找btnOne，自然达不到预期效果。

下面给你两种只用变量实现多按钮绑定点击事件的方法：

方法1：使用.add()合并jQuery对象 #

jQuery的.add()方法可以把多个jQuery对象合并成一个集合，这样就能一次性绑定事件了：

let btnOne = $('.btn-one');
let btnTwo = $('.btn-twoo');
let btnThree = $('.btn-three');

// 合并三个按钮对象并绑定点击事件
btnOne.add(btnTwo).add(btnThree).click(function(e) {
  // 在这里写你的指定操作，比如：
  console.log('按钮被点击了！', e.target);
});

方法2：通过DOM元素数组创建新的jQuery集合 #

因为jQuery支持传入DOM元素数组来创建集合，你可以从每个jQuery变量中取出对应的DOM元素（通过[0]），再放进数组里：

let btnOne = $('.btn-one');
let btnTwo = $('.btn-twoo');
let btnThree = $('.btn-three');

// 提取DOM元素并创建新的jQuery集合
$([btnOne[0], btnTwo[0], btnThree[0]]).click(function(e) {
  // 执行你的操作
});

如果以后你有更多按钮变量，还可以用数组和reduce来批量合并，写法更简洁：

let btnOne = $('.btn-one');
let btnTwo = $('.btn-twoo');
let btnThree = $('.btn-three');

const allButtons = [btnOne, btnTwo, btnThree];
// 用reduce合并所有按钮对象
allButtons.reduce((combinedSet, btn) => combinedSet.add(btn), $()).click(function(e) {
  // 你的操作逻辑
});

内容的提问来源于stack exchange，提问作者user8608046