为什么我的脚本仅作用于具有特定 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 {

   display: none;

}

Answer 2

正如评论中提到的，一个 ID 只能有一个实例。为了达到您想要的结果，您必须将 更改<div id="toggle_panel">content</div>为<div class="toggle_panel">content</div>。然后使用以下 JavaScript：

function myFunction() {

  var panels = document.getElementsByClassName("toggle_panel");

  for(var i = 0; i < panels.length; i++) {

    var panel = panels[i];   

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

       panel.style.display = "block";

    } else {

       panel.style.display = "none";

    }

  }

}

Answer 3

我认为你应该使用querySelectorAll('toggle_panel')，你的代码将是这样的：

Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
  element.display = 'none'})