如何为forEach循环生成的按钮添加独立ID实现单独Toggle效果

方案1：直接修改jQuery事件，只操作当前点击的按钮 #

你现在的问题很明确——点击事件里选了所有.toggle元素，所以一点击所有按钮都跟着切换状态。只需要把操作目标改成当前被点击的按钮，用$(this)就行：

$(".toggle").click(function () {
  $(this).toggleClass("clicked");
});

这样点哪个按钮，就只给这个按钮加/移除clicked类，其他按钮完全不受影响。

方案2：给按钮添加专属ID，结合索引实现 #

如果你一定要用索引i给按钮加专属ID，分两步来：

第一步：修改按钮生成代码，添加专属ID #

在创建按钮的时候，给每个按钮加一个带索引的ID，比如toggle-0、toggle-1这种：

examples.forEach((ex, i) => {
  const button = document.createElement("button");
  button.classList.add("toggle");
  // 添加上带索引的专属ID
  button.id = `toggle-${i}`;
  button.innerHTML = "výsledek";
  button.addEventListener("click", () => toggle(i));
  card.appendChild(button);
});

第二步：绑定独立的点击事件 #

推荐用事件委托，比逐个绑定更高效：

// 监听按钮的父元素card的点击事件，判断点击的是toggle按钮
$(card).on("click", ".toggle", function() {
  $(this).toggleClass("clicked");
});

另外，你原来的原生JS里已经绑定了toggle(i)函数，如果这个函数是用来处理其他开关逻辑的，也可以直接在这个函数里顺便处理按钮的类切换，省得再写jQuery事件：

function toggle(index) {
  // 这里写你原来的开关逻辑...
  // 同时切换对应按钮的类
  document.getElementById(`toggle-${index}`).classList.toggle("clicked");
}

这样原生和jQuery的逻辑能统一，也不会有重复绑定的问题。

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