本文旨在解决使用 JavaScript 为具有相同类名的多个元素添加点击事件，并分别控制它们的显示状态的问题。通过修改 JavaScript 代码，利用 querySelectorAll 获取所有目标元素，并结合 forEach 循环和索引，确保点击事件能够正确地作用于对应的元素，实现独立的显示/隐藏切换功能。
在 Web 开发中，经常会遇到需要控制多个具有相同类名的元素的显示状态的情况，例如，多个卡片都包含一个“选项”按钮，点击后显示对应的下拉菜单。如果使用不当，可能会导致点击一个按钮，却影响到其他卡片的下拉菜单，或者总是影响到第一个卡片。 本文将介绍如何使用 JavaScript 正确地实现这一功能。
问题分析
问题的核心在于如何正确地将点击事件与对应的下拉菜单关联起来。 原始代码使用 document.querySelector(“.dropdown-content”) 来选择下拉菜单元素，这只会返回页面上第一个匹配的元素。 因此，无论点击哪个按钮，都会影响到第一个下拉菜单。
解决方案
为了解决这个问题，需要使用 document.querySelectorAll(“.dropdown-content”) 来获取所有下拉菜单元素的集合。 然后，在为每个按钮添加事件监听器时，使用 forEach 循环提供的索引来访问对应的下拉菜单元素。
立即学习“Java免费学习笔记（深入）”；
以下是修改后的 JavaScript 代码：
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"); });});
关键修改点：
querySelectorAll: 使用 document.querySelectorAll(“.dropdown-content”) 获取所有类名为 dropdown-content 的元素，返回一个 NodeList。forEach 循环索引: 在 optionsButton.forEach 循环中，增加了 index 参数，用于标识当前按钮在集合中的位置。索引访问: 在事件处理函数中，使用 dropdownContent[index] 来访问与当前按钮对应的下拉菜单元素，并切换其 show-dropdown 类。
完整代码示例
以下是包含 HTML、CSS 和 JavaScript 的完整代码示例：
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;}
JavaScript:
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 结构正确，每个卡片都包含一个 .dropdown-toggle 按钮和一个 .dropdown-content 下拉菜单。CSS 样式应该正确地控制 .dropdown-content 元素的初始隐藏状态和显示状态。如果需要更复杂的交互，例如，点击页面其他区域时关闭下拉菜单，可以添加额外的事件监听器。
总结
通过使用 querySelectorAll 获取所有目标元素，并结合 forEach 循环和索引，可以确保点击事件能够正确地作用于对应的元素，实现独立的显示/隐藏切换功能。 这种方法适用于需要控制多个具有相同类名的元素的显示状态的各种场景。
以上就是使用 JavaScript 切换具有相同类名的多个元素的显示状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580306.html
微信扫一扫 
支付宝扫一扫 
