Kombinieren Sie mehrere Umschaltfunktionen ⇐ JavaScript

[Anonymous]

Ich habe drei klobige "offene Div/beiseite" -Funktionen, die ich gerne zu einer einfachen, optimierten Funktion zusammenfassen möchte, die eine beliebige Anzahl von beiseite Elementen als Argumente aufnimmt. Ich benutze nur Vanille -JS für dieses Projekt, daher wird jeder Vanille -Rat geschätzt.

Code: Select all

const buttonOne = document.querySelector("#toggle1");
const buttonTwo = document.querySelector("#toggle2");
const buttonThree = document.querySelector("#toggle3");
const windowOne = document.querySelector("#window1");
const windowTwo = document.querySelector("#window2");
const windowThree = document.querySelector("#window3");
const windows = document.querySelectorAll("aside");

function toggleOne() {
if (windowOne.style.display === "none") {windowOne.style.display = "block"; for (i = 0; i < windows.length; i++) {
windows[i].classList.remove('active');
}; windowOne.classList.add('active')} else {
windowOne.style.display = "none";}
}

function toggleTwo() {
if (windowTwo.style.display === "none") {windowTwo.style.display = "block"; for (i = 0; i < windows.length; i++) {
windows[i].classList.remove('active');
}; windowTwo.classList.add('active')} else {
windowTwo.style.display = "none";}
}

function toggleThree() {
if (windowThree.style.display === "none") {windowThree.style.display = "block"; for (i = 0; i < windows.length; i++) {
windows[i].classList.remove('active');
}; windowThree.classList.add('active')} else {
windowThree.style.display = "none";}
}
< /code>
Und hier ist mein nicht funktionierender Versuch einer allgemeinen Funktion; 100% Chance Ich fehlt etwas Offensichtliches: < /p>
function toggle(event) {
if (event.target.style.display === "none") {event.target.style.display = "block"; for (i = 0; i < windows.length; i++) {
windows[i].classList.remove('active');
}; event.target.classList.add('active')} else {
event.target.style.display = "none";}
}
< /code>
Dies ist der Körper meines HTML mit Toggle () als Onclick -Funktion: < /p>

toggle 1
toggle 2
toggle 3

I'm on the move!


Here we go!


All together now!