Javascript forof не работает в Safari

В настоящее время я пытаюсь создать простую боковую навигацию, которая появляется/исчезает всякий раз, когда нажимается одна из кнопок «toggleSidenav» (их несколько).

Казалось, что при тестировании с Firefox и Chrome все работает нормально, но сегодня, когда я попытался открыть свою страницу в Safari (настольная и мобильная версии), кнопки ничего не сделали.

Проблема, похоже, заключается в цикле for-of-loop, который я использовал, но проверка ссылка 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+, но я все равно хотел бы знать, почему это не сработало.


javascript for-loop safari for-of-loop
person King_Dom    schedule 29.12.2016    source источник
comment
Вы получаете сообщение об ошибке в веб-консоли?   -  person Barmar    schedule 30.12.2016

Ответы (1)


arrow_upward
5
arrow_downward

Safari поддерживает for-of с массивами. getElementsByClassName возвращает NodeList, который похож на массив, но не является истинным массивом, поэтому вам нужно преобразовать его в массив. Поскольку вам требуется поддержка ECMAScript 6 для for-of, вы можете использовать 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>

person Barmar    schedule 29.12.2016
comment
Это сработало отлично. Где-то я мог видеть, что Safari поддерживает только for..of с массивами? Справочная страница MDN, на которую я ссылался выше, по-видимому, предполагала, что она должна работать и с другими итерируемыми объектами. - person King_Dom; 30.12.2016
comment
Кажется, проблема в том, является ли NodeList Iterable. См. stackoverflow.com/questions/31283360/ - person Barmar; 30.12.2016