Több elem gombokkal a megjelenítéshez JavaScriptben

Tegyük fel, hogy most több bekezdésünk van, és mindegyiknek van saját gombja az elrejtéshez:

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

Tegyük meg, hogy egy gombra kattintva az ahhoz tartozó bekezdés elrejtődjön vagy megjelenjen.

Ehhez valahogy össze kell kötnünk a gombokat a bekezdéseinkkel. Erre több módszer is létezik.

Első módszer

Kössük össze a gombokat és a bekezdéseket a következő módon:

<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>

Most bármelyik gombra kattintva elolvashatjuk a data-elem attribútumának tartalmát, és megkereshetjük az azt az id-t tartalmazó bekezdést. Ezt fogjuk váltogatni. Valósítsuk meg a leírtakat:

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');
	});
}

Tanulmányozd a megoldásomat, majd önállóan, anélkül, hogy belenéznél a kódomba, old meg ezt a feladatot.

Második módszer

Az id-k és data-attribútumok beállítása nem túl kényelmes. Tegyük meg, hogy a kapcsolat a sorszám alapján legyen: az első gomb rejtse el az első bekezdést, a második gomb a másodikat, és így tovább.

Valósítsuk meg a leírtakat:

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');
	});
}

Tanulmányozd a megoldásomat, majd önállóan, anélkül, hogy belenéznél a kódomba, old meg ezt a feladatot.

Harmadik módszer

Amint látható, a gombhoz tartozó bekezdés annak bal oldali szomszédja. Ezt felhasználhatjuk a kapcsolat létrehozásához:

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

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

Tanulmányozd a megoldásomat, majd önállóan, anélkül, hogy belenéznél a kódomba, old meg ezt a feladatot.