Več elementov z gumbi za prikaz v JavaScriptu

Recimo, da imamo zdaj več odstavkov in ima vsak svoj gumb za skrivanje:

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

Naredimo tako, da se ob kliku na gumb skrije ali prikaže ustrezen odstavek.

Da bi to naredili, moramo na nek način povezati gumbe z našimi odstavki. Za to obstaja več načinov.

Prvi način

Povežimo gumbe in odstavke na naslednji način:

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

Zdaj bomo ob kliku na katerikoli gumb prebrali vsebino njegovega atributa data-elem in poiskali odstavek s takšnim id. Prav tega bomo preklopili. Uresničimo opisano:

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

Preučite mojo rešitev in nato samostojno, brez gledanja v mojo kodo, rešite to nalogo.

Drugi način

Postavljanje id-jev in data-atributov ni zelo priročno. Naredimo tako, da je povezava glede na zaporedno številko: naj prvi gumb skrije prvi odstavek, drugi gumb - drugi in tako naprej.

Uresničimo opisano:

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

Preučite mojo rešitev in nato samostojno, brez gledanja v mojo kodo, rešite to nalogo.

Tretji način

Kot je razvidno, je odstavek, povezan z gumbom, njegov levi sosed. To lahko uporabimo kot povezavo:

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

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

Preučite mojo rešitev in nato samostojno, brez gledanja v mojo kodo, rešite to nalogo.