Više elemenata sa dugmadima za prikaz na JavaScript-u

Pretpostavimo sada da imamo više pasusa i da svaki od njih ima svoje dugme za sakrivanje:

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

Učinimo da klikom na dugme bude sakriven ili prikazan odgovarajući pasus.

Da bismo to postigli, moramo nekako da povežemo dugmad sa našim pasusima. Za to postoji nekoliko načina.

Prvi način

Povežimo dugmad i pasuse na sledeći 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>

Sada ćemo klikom na bilo koje dugme čitati sadržaj njegovog atributa data-elem i tražiti pasus sa tim id-jem. Njega ćemo i toggle-ovati. Implementirajmo 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');
	});
}

Proučite moje rešenje, a zatim samostalno, ne zavirujući u moj kod, rešite ovaj zadatak.

Drugi način

Raspoređivanje id-jeva i data-atributa nije baš zgodno. Hajde da napravimo da veza bude prema rednom broju: neka prvo dugme sakrije prvi pasus, drugo dugme - drugi i tako dalje.

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

Proučite moje rešenje, a zatim samostalno, ne zavirujući u moj kod, rešite ovaj zadatak.

Treći način

Kao što se može videti, pasus povezan sa dugmetom, nalazi se levo od njega kao sused. To se može iskoristiti kao veza:

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

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

Proučite moje rešenje, a zatim samostalno, ne zavirujući u moj kod, rešite ovaj zadatak.