本文旨在解决当页面上存在多个具有相同类名的元素，并且需要通过点击事件分别控制它们的显示与隐藏时，如何使用原生 JavaScript 实现正确的功能。重点在于如何避免所有操作都只影响到第一个元素的问题，通过索引的方式，确保每个元素都能独立响应点击事件。

当处理多个具有相同类名的元素，并希望通过 JavaScript 为每个元素添加独立的行为时，直接使用 document.querySelector 可能会导致问题。querySelector 只会返回匹配选择器的第一个元素，因此后续的操作都会集中在该元素上，而忽略了其他具有相同类名的元素。解决此问题的关键在于使用 document.querySelectorAll 获取所有匹配的元素，并利用索引来区分和操作它们。

问题分析

假设我们有一组卡片，每个卡片都有一个“选项”按钮和一个下拉菜单。点击任何一个“选项”按钮，都应该只显示或隐藏对应卡片的下拉菜单。如果使用 querySelector 来选择下拉菜单元素，那么无论点击哪个“选项”按钮，都只会影响到第一个下拉菜单。

立即学习“Java免费学习笔记（深入）”；

解决方案

1. 使用 querySelectorAll 获取所有元素： 将 document.querySelector(".dropdown-content") 替换为 document.querySelectorAll(".dropdown-content")。这将返回一个包含所有下拉菜单元素的 NodeList。

2. 在 forEach 循环中使用索引： 在遍历按钮的 forEach 循环中，添加索引参数。这个索引将对应于按钮在 optionsButton 数组中的位置，也对应于其关联的下拉菜单在 dropdownContent NodeList 中的位置。

3. 使用索引访问对应的元素： 在事件监听器中，使用索引来访问 dropdownContent NodeList 中对应的下拉菜单元素，并切换其 show-dropdown 类。

代码示例

InstantMind

AI思维导图生成器，支持30+文件格式一键转换，包括PDF、Word、视频等。

下载

const optionsButton = Array.from(document.querySelectorAll(".dropdown-toggle"));
const dropdownContent = document.querySelectorAll(".dropdown-content");

optionsButton.forEach((button, index) => {
  button.addEventListener("click", () => {
    dropdownContent[index].classList.toggle("show-dropdown");
  });
});

HTML 结构示例

  

    
Title
    
blah blah blah
    Options
    

      Edit
      Delete
    
  
  

    
Title
    
blah blah blah
    Options
    

      Edit
      Delete
    
  
  

    
Title
    
blah blah blah
    Options
    

      Edit
      Delete
    
  

CSS 样式示例

ul {
  display: flex;
  list-style: none;
}

li {
  margin: 0 2em;
}

.dropdown-content {
  display: none;
  flex-direction: column;
}

.show-dropdown {
  display: flex;
}

.dropdown-content a {
  padding: 10px 0;
}

注意事项

• 确保 HTML 结构中按钮和下拉菜单的顺序与 JavaScript 代码中的索引对应。
• 如果动态添加或删除元素，需要重新运行 JavaScript 代码以更新 optionsButton 和 dropdownContent。

总结

通过使用 querySelectorAll 获取所有元素，并在 forEach 循环中使用索引，可以有效地为多个具有相同类名的元素添加独立的交互行为。这种方法避免了只影响第一个元素的问题，确保每个元素都能正确响应用户的操作。这种模式在构建动态网页和用户界面时非常有用，能够提升用户体验。