如何正确展开指定子元素：解决 JavaScript 中的元素选择问题

本文旨在解决 JavaScript 中根据点击事件展开特定子元素的问题。通过分析常见错误原因，如重复 ID 的使用，并提供使用唯一 ID 或类名结合索引的解决方案，帮助开发者更精确地控制页面元素的行为，避免展开错误的子元素，并提供代码优化的建议。

解决方案：避免 ID 冲突，使用类名和索引

问题描述中的核心难点在于，点击某个 .event_container 元素时，总是展开页面上第一个 team_details 元素，而不是当前点击元素内的 team_details 元素。这通常是由于 HTML 中存在多个相同 ID 的元素导致的。document.getElementById() 方法只会返回页面上第一个匹配该 ID 的元素。

以下提供两种解决方案：

1. 使用唯一的 ID，并传递索引

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

如果需要继续使用 ID，则需要确保每个 team_details 元素都有唯一的 ID。可以在生成 HTML 时，为每个元素添加一个唯一的索引。

• 修改 HTML 结构：

  
      
  Name of the event
      
  
      
  
          Create Team
          Singleplayer
          
  
          
  
              
  
                  
  Team Name
                  Join >
              
          
          
  
              
  
                  
  Team Name
                  Join >
              
          
      
  

  注意: 移除 id="team_details"，使用 class="team_details"。 同时将 onclick="unwrapEventContainer()" 修改为 onclick="unwrapEventContainer(this)"，将当前点击的元素传递给函数。

• 修改 JavaScript 代码：

  function unwrapEventContainer(element) {
      // 找到当前点击的 event_container 下的 team_details 元素
      var team = element.querySelector(".team_details");
  
      element.classList.toggle("active");
      if (element.style.height === "70px") {
          element.style.height = "230px";
          // This opens child div
          team.style.display = "inline-block";
      } else {
          element.style.height = "70px";
          team.style.display = "none";
      }
  }

  element.querySelector(".team_details") 方法用于在当前点击的 event_container 元素内部查找类名为 team_details 的元素。

2. 使用类名，并遍历查找

DeepL Write

DeepL推出的AI驱动的写作助手，在几秒钟内完善你的写作

下载

更推荐的方法是使用类名来选择元素，并结合索引来定位目标元素。

• HTML 结构（同上）： 移除 id="team_details"，使用 class="team_details"。同时将 onclick="unwrapEventContainer()" 修改为 onclick="unwrapEventContainer(this)"，将当前点击的元素传递给函数。

• JavaScript 代码：

  function unwrapEventContainer(element) {
      // 找到当前点击的 event_container 下的 team_details 元素
      var team = element.querySelector(".team_details");
  
      element.classList.toggle("active");
      if (element.style.height === "70px") {
          element.style.height = "230px";
          // This opens child div
          team.style.display = "inline-block";
      } else {
          element.style.height = "70px";
          team.style.display = "none";
      }
  }

  element.querySelector(".team_details") 方法用于在当前点击的 event_container 元素内部查找类名为 team_details 的元素。

代码优化建议

• 避免内联事件处理： 尽量避免在 HTML 中直接使用 onclick 等内联事件处理函数。可以使用 addEventListener 方法来绑定事件，使代码更易于维护和管理。

  var coll = document.getElementsByClassName("event_container");
  for (let i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
          // ... (展开/折叠逻辑)
      });
  }

• 使用 CSS 类来控制样式： 不要直接修改元素的 style 属性，而是通过添加或移除 CSS 类来控制元素的样式。这样可以更好地分离结构、样式和行为。

  element.classList.toggle("expanded"); // 添加或移除 "expanded" 类

  在 CSS 中定义 expanded 类的样式：

  .event_container {
      height: 70px;
  }
  
  .event_container.expanded {
      height: 230px;
  }
  
  .team_details {
      display: none;
  }
  
  .event_container.expanded .team_details {
      display: inline-block;
  }

• 缓存 DOM 元素： 如果需要在多个地方使用同一个 DOM 元素，可以将其缓存到一个变量中，避免重复查找。

总结

解决 JavaScript 中元素选择问题的关键在于理解 document.getElementById() 和 document.getElementsByClassName() 的区别，以及避免在 HTML 中使用重复的 ID。通过使用唯一的 ID 或类名结合索引，可以更精确地控制页面元素的行为。此外，采用更规范的编码实践，如避免内联事件处理和使用 CSS 类来控制样式，可以提高代码的可维护性和可读性。