Vairāki elementi ar pogām JavaScript

Tagad pieņemsim, ka mums ir daudz rindkopu, un katrai ir sava pogā, lai to paslēptu:

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

Izveidosim tā, lai, noklikšķinot uz pogas, atbilstošā rindkopa tiktu paslēpta vai parādīta.

Lai to izdarītu, mums kaut kā jāsasaista pogas ar mūsu rindkopām. Tam ir vairāki veidi.

Pirmā metode

Sasaistīsim pogas un rindkopas šādi:

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

Tagad, noklikšķinot uz jebkuras pogas, mēs izlasīsim tās data-elem atribūta saturu un meklēsim rindkopu ar šādu id. To mēs arī pārslēgsim. Realizēsim aprakstīto:

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

Izpētiet manu risinājumu un pēc tam patstāvīgi, neieskatoties manā kodā, atrisiniet šo uzdevumu.

Otrā metode

Id un data atribūtu izvietošana nav ļoti ērta. Izdarīsim tā, lai saikne būtu pēc kārtas numura: lai pirmā poga paslēpj pirmo rindkopu, otrā poga - otro un tā tālāk.

Realizēsim aprakstīto:

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

Izpētiet manu risinājumu un pēc tam patstāvīgi, neieskatoties manā kodā, atrisiniet šo uzdevumu.

Trešā metode

Kā var redzēt, ar pogu saistītā rindkopa atrodas tai pa kreisi. To var izmantot kā saikni:

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

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

Izpētiet manu risinājumu un pēc tam patstāvīgi, neieskatoties manā kodā, atrisiniet šo uzdevumu.