Viele Elemente mit Anzeigeschaltflächen in JavaScript

Nehmen wir nun an, wir haben viele Absätze und jede hat ihre eigene Schaltfläche zum Ausblenden:

<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

Lassen Sie uns es so einrichten, dass ein Klick auf die Schaltfläche den entsprechenden Absatz aus- oder einblendet.

Dazu müssen wir die Schaltflächen auf irgendeine Weise mit unseren Absätzen verknüpfen. Dafür gibt es mehrere Möglichkeiten.

Erste Methode

Verknüpfen wir die Schaltflächen und Absätze wie folgt:

<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

Jetzt werden wir bei einem Klick auf eine beliebige Schaltfläche den Inhalt ihres data-elem-Attributs auslesen und den Absatz mit dieser id suchen. Diesen werden wir dann umschalten. Setzen wir das Beschriebene um:

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		let elem = document.querySelector('#' + this.dataset.elem);
		elem.classList.toggle('hidden');
	});
}

Studieren Sie meine Lösung und lösen Sie dann diese Aufgabe selbstständig, ohne in meinen Code zu schauen.

Zweite Methode

IDs und Data-Attribute zu vergeben ist nicht sehr bequem. Lassen Sie uns es so einrichten, dass die Verknüpfung durch die fortlaufende Nummer erfolgt: die erste Schaltfläche soll den ersten Absatz ausblenden, die zweite Schaltfläche den zweiten usw.

Setzen wir das Beschriebene um:

let buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', function() {
		elems[i].classList.toggle('hidden');
	});
}

Studieren Sie meine Lösung und lösen Sie dann diese Aufgabe selbstständig, ohne in meinen Code zu schauen.

Dritte Methode

Wie man sehen kann, ist der mit der Schaltfläche verknüpfte Absatz ihr linker Nachbar. Dies können wir für die Verknüpfung nutzen:

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		this.previousElementSibling.classList.toggle('hidden');
	});
}

Studieren Sie meine Lösung und lösen Sie dann diese Aufgabe selbstständig, ohne in meinen Code zu schauen.