如何为所有类元素添加eventListener？多下拉菜单失效求助

嘿，我完全懂你刚学JS时遇到这种问题的困惑！咱们一步步来拆解：

核心原因：你只给第一个下拉菜单绑了事件 #

当你用document.querySelector('.dropdown-select')的时候，这个方法的作用是在整个页面里找到第一个匹配该类名的元素，然后只给这一个元素绑定了点击事件。第二个下拉菜单的.dropdown-select元素根本没被选中，自然不会响应点击啦～

就像你在一堆苹果里只拿了第一个，剩下的苹果不管怎么碰都不会有反应😅

怎么解决？分两步走 #

1. 选中所有下拉菜单元素 #

把querySelector换成querySelectorAll，这个方法会返回页面里所有匹配类名的元素（类似一个数组，我们叫它NodeList）：

// 获取所有带.dropdown-select类的元素
const allSelects = document.querySelectorAll('.dropdown-select');

2. 给每个元素单独绑定点击事件 #

我们需要遍历这个NodeList，给每一个下拉选项都绑上点击逻辑。这里要注意：原来的代码里如果是全局查找菜单内容（比如document.querySelector('.dropdown-menu')），也要改成相对当前点击元素的查找，不然所有点击都会修改第一个菜单的内容！

比如修改后的代码大概是这样：

const allSelects = document.querySelectorAll('.dropdown-select');

// 遍历每个下拉选择器
allSelects.forEach(function(selectItem) {
  selectItem.addEventListener('click', function() {
    // 用this获取当前被点击的下拉选项，然后找它对应的菜单区域
    // 这里假设你的下拉选项和菜单是同一个父元素下的
    const targetMenu = this.parentElement.querySelector('.dropdown-menu');
    
    // 接下来就是你原来的逻辑，比如更新菜单内容
    // 比如你原来的代码里是修改菜单的文本，现在就用targetMenu来操作，而不是全局的第一个菜单
    targetMenu.textContent = this.textContent;
    // 或者你原来的显示/隐藏逻辑，也用targetMenu来处理
  });
});

关键知识点总结 #

• querySelector()：只拿第一个匹配的元素
• querySelectorAll()：拿所有匹配的元素，返回一个可遍历的集合
• this在事件回调里：代表当前被点击的那个元素，用它来找到对应的菜单，就能保证每个下拉菜单独立工作啦

这样修改后，第二个下拉菜单就能正常响应点击了，每个菜单的操作也不会互相影响～

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