Javascript for...of 在 Safari 中不起作用

Question

目前我正在尝试构建一个简单的侧边导航，只要单击其中一个 "toggleSidenav" 按钮（有多个）appears/disappears。

在使用 Firefox 和 Chrome 进行测试时似乎工作正常，但今天当我尝试使用 Safari（桌面版和移动版）打开我的页面时，按钮没有任何作用。

问题似乎是我使用的for-of-loop，但检查reference of the for...of，Safari应该支持它。

我的代码：

for (var btn of document.getElementsByClassName("toggleSidenav")) {
    btn.addEventListener("click", function() {
        var style = window.getComputedStyle(document.getElementById("sidenav"));

        if (style.getPropertyValue("display") == "none") {
            openSidenav();
        } else {
            closeSidenav();
        }
    });
}

我可能需要使用替代方法，因为 for...of 只有 IE/Edge 12+ 支持，但我仍然想知道为什么这不起作用。

Answer 1

Safari 支持 for-of 数组。 getElementsByClassName returns a NodeList，它是类数组，但不是真正的数组，因此您需要将其转换为数组。由于您需要对 for-of 的 ECMAScript 6 支持，因此您可以使用 Array.from() 进行此转换，而不是像 Array.prototype.slice.call().

这样的旧习语

for (var btn of Array.from(document.getElementsByClassName("toggleSidenav"))) {
  btn.addEventListener("click", function() {
    var style = window.getComputedStyle(document.getElementById("sidenav"));

    if (style.getPropertyValue("display") == "none") {
      openSidenav();
    } else {
      closeSidenav();
    }
  });
}

function openSidenav() {
  document.getElementById("sidenav").style.display = 'block';
}

function closeSidenav() {
  document.getElementById("sidenav").style.display = 'none';
}

<button class="toggleSidenav">
  Toggle 1
</button>
<button class="toggleSidenav">
  Toggle 2
</button>
<button class="toggleSidenav">
  Toggle 3
</button>
<div id="sidenav">
  Side Nav
</div>

Javascript for...of 在 Safari 中不起作用

Javascript for...of doesn't work in Safari

javascript

safari

for-loop

for-of-loop