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

时间:2016-12-29 23:00:24

标签: javascript for-loop safari for-of-loop

目前我正在尝试建立一个简单的侧航行,只要其中一个" toggleSidenav"单击按钮(有多个)。

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

问题似乎是我使用的循环,但检查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 ...只能由IE / Edge 12+支持,但我仍然想知道为什么这样做不起作用。

1 个答案:

答案 0 :(得分:5)

Safari支持for-of数组。 getElementsByClassName返回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>