javascript - JS 类切换不适用于 getElementsByClassName

Question

我正在尝试在没有 jQuery、纯 JS 的情况下对滑出菜单的多个元素进行简单的类切换。

function toggle_classes() {

        var navicon = document.getElementById('nav-icon');
        var overlay = document.getElementsByClassName('overlay');

        navicon.classList.toggle('open');
        overlay.classList.toggle('show');
    }

    document.querySelector('#nav-icon1').addEventListener('click', toggle_classes);

当我使用 getElementById 定义变量时，它可以工作，但它不适用于 getElementsByClassName

有人能告诉我如何解决这个问题吗？我更愿意使用 getElementsByClassName，这样我就可以用一行代码定位多个元素。

Answer 1

getElementsByClassName返回的数据结构是一个类似数组的结构，而不是dom元素。因此您必须循环遍历元素才能单独切换每个元素。

for (var i = 0; i < overlay.length; i++) {
  overlay[i].classList.toggle(...)
}