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

Answer 2

document.getElementsByClassName ...注意＆＃34; s＆＃34;在元素？

（换句话说，该方法返回一个数组，而不是单个元素，所以你需要做像overlay[0].etc这样的事情）

JS类切换不使用getElementsByClassName

2 个答案: