本文旨在解决当页面上存在多个具有相同类名的元素，并且需要通过点击事件分别控制它们的显示与隐藏时，如何使用原生 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 结构示例
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 循环中使用索引，可以有效地为多个具有相同类名的元素添加独立的交互行为。这种方法避免了只影响第一个元素的问题，确保每个元素都能正确响应用户的操作。这种模式在构建动态网页和用户界面时非常有用，能够提升用户体验。
以上就是使用 JavaScript 动态切换具有相同类名的多个元素的显示状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580266.html
微信扫一扫 
支付宝扫一扫 
