Javascript - 切換多個類onclick

我想切換多個類onclick使用香草的Javascript。我想要做的是當一個btn被點擊兩個類別與另外兩個類別切換。我有5個班，共它們是：.menu_btn，.main_nav，.btn_active，.container，.container_active。當我按下。 menu_btn我想班.main_nav與.btn_active切換，並在同一時間，我想有.container與.container_active切換。類.container是唯一一個擁有該類的5個元素，其他類型是單個的。我已經完成了這個使用jQuery，但我想知道使用香草Javascript的方式。希望有人能幫助。Javascript - 切換多個類onclick

有一點需要指出的是，當我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); 
    } 

};

來源

2016-04-14 NoName84

替換'容器[指數] .classList.toggle（containerActive）;''與容器[指數] .classList.toggle（ 'containerActive'）;' – gurvinder372

不工作@ gurvinder372。即使是第一級mainNav也不會與btnActive切換。不知道什麼是錯的 – NoName84

對不起，我的意思是'container_Active''不是''containerActive'' – gurvinder372

我已經修改了你的腳本，並創造了小提琴，所以你看到它是如何工作的：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'); 
    } 
}

來源

2016-04-14 08:33:57

謝謝@ tudor.gergely您的代碼正在工作！ – NoName84

Javascript - 切換多個類onclick

回答

相關問題