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

Question

目前我正在嘗試建立一個簡單的側導航，只要點擊其中一個“toggleSidenav”按鈕（有多個）就會出現/消失。

在使用Firefox和Chrome進行測試時似乎工作正常，但今天當我嘗試使用Safari（桌面和移動版）打開我的頁面時，按鈕沒有做任何事情。

問題似乎是我使用的循環，但檢查for ...的引用 ，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+支持，但我仍然想知道為什么這不起作用。

Answer 1

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>