Javascript: Mehreren Elementen eine Klasse active hinzufügen?

Hallo. Aktuell ist es so, dass wenn ich auf den Button klicke, immer nur das erste Element die Klasse active bekommt und verschwindet. Wie lautet der Befehl, damit alle Elemente, die die Klasse "TestTest" haben, die Klasse active bekommen?

Anscheinend funktioniert es mit dem Befehl: TestText.classList.toggle("active"); nur für 1 Element

hier mein code:

Answer 1

[Babelfish]

Dafür gibt es querySelectorAll:

document.querySelector(".Button").addEventListener("click", (e) => {
  document.querySelectorAll(".TestText").forEach((element) => {
    element.classList.toggle("active");
  });
});

PS: Ich hatte meine Antwort gestern noch um zwei Hinweise zur Struktur deines Codes ergänzt.

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Answer 2

[R4c1ngCube]

Aus der Dokumentation:

querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Und:

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead

Kurzgefasst: du musst stattdessen querySelectorAll verwenden und dann durch die List iterieren (ich glaube zumindest dass es nicht ohne iterieren geht).

Tipp: Jquery macht alles einfacher. Da könntest du einfach schreiben:

$(".TestText").toggleClass("active")

Noch ein 2. Tipp: du kannst die Befehle einfach im Entwicklermodus des Browsers in der Konsole ausprobieren. Da siehst du dann auch was die zurückgegen und alles passiert live.

Comments

[Hamudi786]

Hallo. Danke dir sehr. Aber was ist iterieren?

[R4c1ngCube]

@Hamudi786

Iterieren bedeutet die Elemente eines Containers der Reihe nach durchzugehen.

Diesen Code würde man beschreiben als du iterierst durch den Container und gibst die Elemente auf die Konsole aus:

for (let i = 0; i < container.length; i++) {
    console.log(container[i]);
}

Java script hat aber auch bessere/einfachere Wege um alle Elemente durchzugehen. Aus der Dokumentation:

const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
  deleteUser(userItem);
});

[Hamudi786]

Ja das mit dem Entwicklermodus kenne und nutze ich natürlich. Wenn ich jetzt das querySelector() durch querySelectorAll() ersetze, reagiert es gar nicht mehr...

[Hamudi786]

wie muss denn jetzt mein code in meinem Fall aussehen, damit es funktioniert?

[R4c1ngCube]

@Hamudi786

Ich weiß nicht wie sinnvoll es ist, wenn ich den fertigen Code schreibe. Ich hab es jetzt mal trotzdem gemacht (am Handy also kann es gut sein, dass Schreibfehler drin sind):

const button = document.querySelector(".Button");
const testTextArray = document.querySelectorAll(".TestText");

button.addEventListener("click", () => {
    testTextArray.forEach((testText) => {
        testText.toggleClass(".active")});
});

Ich habe außerdem alle Variablen vorne klein geschrieben. Das ist so üblich in Javascript (auch um zu verhindern, dass man nicht versehentlich Klassennamen verwendet)