Javascript - 切换多个类 onclick

Question

我正在尝试使用 vanilla Javascript 切换多个类onclick。我想做的是，当单击一个 btn 时，两个类可以与另外两个类进行切换。我总共有 5 个类，分别是: .menu_btn 、 .main_nav 、 .btn_active 、 .container 、 <强>.container_active。当我按下 .menu_btn 时，我希望类 .main_nav 与 .btn_active 切换，同时我希望.container 与 .container_active 切换。 .container 类是该类中唯一拥有 5 个元素的类，其他都是单一的。我已经使用 jQuery 完成了此操作，但我想知道使用普通 Javascript 的方法。希望有人能帮忙。

需要指出的一件事是，当我 console.log .btn_active 和 .container_active 时，我返回 [ ] 一个空数组。这 2 个 css 类没有分配给我的项目的任何元素。它们仅存在于 CSS 中，其目的是用于切换。

谢谢

jQuery 代码:

$(function(){

   $(".menu_btn").on("click", function(){

       $(".main_nav").toggleClass("btn_active");
       $(".container").toggleClass("container_active");

   }); 

});

普通 Javascript 代码:

var menuBtn = document.getElementsByClassName("menu_btn");
var mainNav = document.getElementsByClassName("main_nav");
var btnActive = document.getElementsByClassName("btn_active");
var container = document.getElementsByClassName("container");
var containerActive = document.getElementsByClassName("container_active");

menuBtn.onclick = function(){

    mainNav.classList.toggle(btnActive);
    for ( index = 0; index <= container.lenght -1; index++ ){
        container[index].classList.toggle(containerActive);
    }

};

Answer 1

我修改了您的脚本并创建了一个 fiddle ，以便您了解它是如何工作的:https://jsfiddle.net/eyrpdsc2/

切换接受字符串作为参数，而不是节点。所以你需要传递'btn_active'而不是btnActive。另请记住，querySelectorAll 返回一个 NodeList(而不是数组)，因此您不能使用 forEach。

var menuBtn = document.querySelectorAll(".menu_btn");
var mainNav = document.querySelectorAll(".main_nav");
var container = document.querySelectorAll(".container");

for (var i = 0; i < menuBtn.length; ++i) {
    menuBtn[i].addEventListener('click', toggleClasses);
}

function toggleClasses() {
        var i = 0;
    for (i = 0; i < mainNav.length; ++i) {
        mainNav[i].classList.toggle('btn_active');
    }
    for (i = 0; i < container.length; ++i) {
        container[i].classList.toggle('container_active');
    }
}