使用 J*aScript 动态切换具有相同类名的多个元素的显示状态

使用 javascript 动态切换具有相同类名的多个元素的显示状态

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

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

问题分析

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

解决方案

使用 querySelectorAll 获取所有元素： 将 document.querySelector(".dropdown-content") 替换为 document.querySelectorAll(".dropdown-content")。这将返回一个包含所有下拉菜单元素的 NodeList。
在 forEach 循环中使用索引： 在遍历按钮的 forEach 循环中，添加索引参数。这个索引将对应于按钮在 optionsButton 数组中的位置，也对应于其关联的下拉菜单在 dropdownContent NodeList 中的位置。
使用索引访问对应的元素： 在事件监听器中，使用索引来访问 dropdownContent NodeList 中对应的下拉菜单元素，并切换其 show-dropdown 类。

代码示例

YouMind

AI内容创作和信息整理平台

207 查看详情 YouMind

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 结构中按钮和下拉菜单的顺序与 J*aScript 代码中的索引对应。
如果动态添加或删除元素，需要重新运行 J*aScript 代码以更新 optionsButton 和 dropdownContent。

总结

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

以上就是使用 J*aScript 动态切换具有相同类名的多个元素的显示状态的详细内容，更多请关注其它相关文章！

# 应于 # 北京seo排名咋做 # 兰州榆中企业网站建设 # seo优化包含哪些内容 # 线上网站推广方案怎么写 # 软文推广营销是怎么做的 # 湖北seo推广作用 # 武汉优化网站排行榜 # 亿玫网络seo优化 # 短视频变现营销推广策略 # 网站关键词优化办法 # 并在 # 遍历 # 都有 # css # 选择器 # 影响到 # 只会 # 都能 # 第一个 # 多个 # 点击事件 # ssl # node # html # java # javascript

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-01

4008744355

使用 J*aScript 动态切换具有相同类名的多个元素的显示状态

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice