如何使用循环重构三个按钮的重复点击事件绑定代码？

DevOps 小满

2026-8-30

jQuery重复绑定点击事件的简化实现

你当前三段事件绑定逻辑的差异仅为按钮ID的数字后缀、对应allMenu数组的索引值，通过循环批量绑定即可消除重复代码。

基础循环实现

利用let的块级作用域特性，循环生成按钮选择器、绑定对应索引的菜单数据即可，无需重复写逻辑：

for (let i = 0; i < 3; i++) {
  $(`#addButton${i + 1}`).on("click", function () {
    const currentMenu = allMenu[i];
    const addMenu = new Menu(currentMenu.Id, currentMenu.Title);
    console.log(`newOrder : ${addMenu.mId}`);
    addToCart(addMenu);
  });
}

更易扩展的写法

如果后续需要新增加购按钮、不需要硬编码循环次数，可以直接遍历allMenu数组，自动匹配对应按钮：

// 自动适配allMenu的长度，新增菜单项和对应按钮后无需修改JS逻辑
allMenu.forEach((menuItem, index) => {
  $(`#addButton${index + 1}`).on("click", function () {
    const addMenu = new Menu(menuItem.Id, menuItem.Title);
    console.log(`newOrder : ${addMenu.mId}`);
    addToCart(addMenu);
  });
});

最优实践（推荐）

不用依赖ID拼接规则，给所有加购按钮加统一类名，通过data-*属性存对应菜单索引，后续维护成本更低：

按钮HTML结构调整：

<button class="add-cart-btn" data-menu-index="0">加入购物车</button>
<button class="add-cart-btn" data-menu-index="1">加入购物车</button>
<button class="add-cart-btn" data-menu-index="2">加入购物车</button>

统一绑定事件：

$(".add-cart-btn").on("click", function () {
  const index = Number($(this).data("menu-index"));
  const currentMenu = allMenu[index];
  const addMenu = new Menu(currentMenu.Id, currentMenu.Title);
  console.log(`newOrder : ${addMenu.mId}`);
  addToCart(addMenu);
});