JavaScript事件委托失效，如何实现多元素切换功能？

嘿，我一眼就看出问题所在了！你当前的代码里有个关键错误：document.querySelector('.click')和document.querySelector('.content')只会返回页面中第一个匹配选择器的元素，所以不管你点击哪个按钮，代码始终在操作第一个.content元素，这就是第二个按钮没反应的原因。

不过你用事件委托（给父元素rootdiv加监听）的思路是完全正确的，只需要调整一下找到对应内容元素的方式就行。下面是修正后的方案：

修正后的JavaScript代码 #

let rootDev = document.querySelector('.rootdiv');
rootDev.addEventListener('click', (e) => {
  const targetBtn = e.target;
  // 先判断点击的元素是否是目标按钮（用contains更兼容多类名场景）
  if (targetBtn.classList.contains('click')) {
    // 找到当前按钮所属的.card容器，再获取里面的.content元素
    const correspondingContent = targetBtn.closest('.card').querySelector('.content');
    // 直接用toggle方法切换类名，替代繁琐的if-else逻辑
    correspondingContent.classList.toggle('toggle');
  }
})

为什么这样能行？ #

• e.target准确获取到了你点击的那个按钮元素，而不是固定的第一个按钮。
• closest('.card')会从当前按钮开始向上查找最近的.card父元素，这样不管DOM结构怎么调整（只要按钮和内容在同一个.card里），都能精准定位到对应的容器。
• 从容器里找.content，就能确保操作的是当前按钮对应的内容，而不是全局的第一个内容。
• classList.toggle('toggle')可以自动添加/移除类名，比手动写if-else判断要简洁得多。

补充小提示 #

• 尽量用classList.contains('click')代替直接判断className === 'click'，如果元素有多个类名（比如<button class="click btn-primary">），className会返回所有类名的字符串，直接全等判断会失效，而contains只会检查是否包含目标类名，更可靠。
• 你的CSS和HTML代码不需要修改，保持原样就可以正常工作。

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