为什么我的脚本仅作用于具有特定 ID 值的第一个元素？

Question

我有一个生成多个 DIV id="toggle_panel" 的查询，我知道我可以有效地动态更改 DIV 的 ID。

下面是直接来自 w3schools 的脚本，开箱即用，效果很好......仅适用于第一个 DIV 和第一个 DIV。如何将查询中的动态变量应用到我的脚本？

第二个问题：如何才能让DIV默认隐藏？

function myFunction() {

  var x = document.getElementById("toggle_panel");

  if (x.style.display === "none") {

    x.style.display = "block";

  } else {

    x.style.display = "none";

  }

}

Answer 1

对于你的第一个问题，使用类来标记类似 html 元素的集合会更合适。所以你的 div 应该看起来像这样：<div class="toggle_panel">...</div><div class="toggle_panel">...</div><div class="toggle_panel">...</div>然后您就可以使用document.getElementsByClassName('toggle_panel')它们来访问它们。另外，为了默认隐藏它们，您可以使用 css 来定位您的类，如下所示。.toggle_panel {&nbsp; &nbsp;display: none;}

Answer 2

正如评论中提到的，一个 ID 只能有一个实例。为了达到您想要的结果，您必须将 更改<div id="toggle_panel">content</div>为<div class="toggle_panel">content</div>。然后使用以下 JavaScript：function myFunction() {&nbsp; var panels = document.getElementsByClassName("toggle_panel");&nbsp; for(var i = 0; i < panels.length; i++) {&nbsp; &nbsp; var panel = panels[i];&nbsp; &nbsp;&nbsp; &nbsp; if (panel.style.display === "none") {&nbsp; &nbsp; &nbsp; &nbsp;panel.style.display = "block";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;panel.style.display = "none";&nbsp; &nbsp; }&nbsp; }}

Answer 3

我认为你应该使用querySelectorAll('toggle_panel')，你的代码将是这样的：Array.from(document.querySelectorAll('toggle_panel')).forEach((element)&nbsp;=>&nbsp;{ &nbsp;&nbsp;element.display&nbsp;=&nbsp;'none'})