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完成了这个，但我想知道使用vanilla Javascript的方式。希望有人可以提供帮助。

有一点需要指出的是，当我 console.log .btn_active 和 .container_active 时，我得到一个空数组。这两个css类没有分配给我项目的任何元素。它们仅存在于css中，其目的是切换。

由于

jQuery代码：

$(function(){

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

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

   }); 

});

Vanilla 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

我修改了您的脚本并创建了一个小提琴，以便您了解其工作原理：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');
    }
}

Javascript - 切换多个类onclick

1 个答案: