本文旨在解决当页面上存在多个具有相同类名的元素，并且需要通过点击事件分别控制它们的显示与隐藏时，如何使用原生 JavaScript 实现正确的功能。重点在于如何避免所有操作都只影响到第一个元素的问题，通过索引的方式，确保每个元素都能独立响应点击事件。
当处理多个具有相同类名的元素，并希望通过 JavaScript 为每个元素添加独立的行为时，直接使用 document.querySelector 可能会导致问题。querySelector 只会返回匹配选择器的第一个元素，因此后续的操作都会集中在该元素上，而忽略了其他具有相同类名的元素。解决此问题的关键在于使用 document.querySelectorAll 获取所有匹配的元素，并利用索引来区分和操作它们。
问题分析
假设我们有一组卡片，每个卡片都有一个“选项”按钮和一个下拉菜单。点击任何一个“选项”按钮，都应该只显示或隐藏对应卡片的下拉菜单。如果使用 querySelector 来选择下拉菜单元素，那么无论点击哪个“选项”按钮，都只会影响到第一个下拉菜单。
立即学习“Java免费学习笔记（深入）”；
解决方案
使用 querySelectorAll 获取所有元素： 将 document.querySelector(".dropdown-content") 替换为 document.querySelectorAll(".dropdown-content")。这将返回一个包含所有下拉菜单元素的 NodeList。
在 forEach 循环中使用索引： 在遍历按钮的 forEach 循环中，添加索引参数。这个索引将对应于按钮在 optionsButton 数组中的位置，也对应于其关联的下拉菜单在 dropdownContent NodeList 中的位置。
使用索引访问对应的元素： 在事件监听器中，使用索引来访问 dropdownContent NodeList 中对应的下拉菜单元素，并切换其 show-dropdown 类。
代码示例
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 结构示例
<ul>
<li>
<h1>Title</h1>
<p>blah blah blah</p>
<button class="dropdown-toggle">Options</button>
<div class="dropdown-content">
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
</li>
<li>
<h1>Title</h1>
<p>blah blah blah</p>
<button class="dropdown-toggle">Options</button>
<div class="dropdown-content">
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
</li>
<li>
<h1>Title</h1>
<p>blah blah blah</p>
<button class="dropdown-toggle">Options</button>
<div class="dropdown-content">
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
</li>
</ul>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 循环中使用索引，可以有效地为多个具有相同类名的元素添加独立的交互行为。这种方法避免了只影响第一个元素的问题，确保每个元素都能正确响应用户的操作。这种模式在构建动态网页和用户界面时非常有用，能够提升用户体验。
