Javascript for ... of在Safari中不起作用 [英] Javascript for...of doesn't work in Safari

问题描述

目前我正在尝试构建一个简单的侧面导航，只要单击其中一个toggleSidenav按钮（有多个），就会出现/消失。

使用Firefox和Chrome进行测试时工作正常，但是今天当我尝试用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（）; 
} 
}）; 
 
 $ / code $ 
 
 
我可能需要使用替代方法，因为只支持IE / Edge 12+，但我仍然想知道为什么这不起作用。
解决方案
 Safari支持 for-of 与数组。  getElementsByClassName 返回一个 NodeList ，它类似于数组，但不是一个真正的数组，所以需要转换它来一个数组。由于您需要ECMAScript 6支持 for ，所以您可以使用 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 cla SS = toggleSidenav >切换1< / button>< button class =toggleSidenav>切换2< / button>< button class =toggleSidenav>切换3< / button>< div id =sidenav> Side Nav< / div>  




Currently I am trying to build a simple sidenavigation that appears/disappears whenever one of the "toggleSidenav" buttons is clicked (there are multiple).

It seemed to work fine when testing with Firefox and Chrome but today when I tried to open my page with Safari (desktop and mobile version) the buttons didn't do anything.

The problem seems to be the for-of-loop I used but checking the reference of the for...of, Safari should support it.

My code:

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();
        }
    });
}

I probably need to use an alternative method anyway because the for...of is only supported by IE/Edge 12+ but I would still like to know why this didn't work.

解决方案

Safari supports for-of with arrays. getElementsByClassName returns a NodeList, which is array-like, but isn't a true array, so you need to convert it to an array. Since you're requiring ECMAScript 6 support for for-of, you can use Array.from() for this conversion, rather than some old idioms like 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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！