Meerdere elementen met knoppen om te tonen in JavaScript

Stel dat we nu meerdere alinea's hebben en elk heeft zijn eigen knop om te verbergen:

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

Laten we ervoor zorgen dat bij een klik op de knop de bijbehorende alinea wordt verborgen of getoond.

Hiervoor moeten we op de een of andere manier de knoppen aan onze alinea's koppelen. Er zijn verschillende manieren om dit te doen.

Eerste methode

Laten we de knoppen en alinea's als volgt koppelen:

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

Nu kunnen we bij een klik op een willekeurige knop de inhoud van het data-elem attribuut lezen en op zoek gaan naar de alinea met dat id. Die zullen we dan tonen/verbergen. Laten we het beschrevene implementeren:

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

Bestudeer mijn oplossing en los deze taak dan zelfstandig op, zonder in mijn code te kijken.

Tweede methode

Het is niet erg handig om id's en data-attributen toe te wijzen. Laten we het zo maken dat de koppeling gebaseerd is op het volgnummer: laat de eerste knop de eerste alinea verbergen, de tweede knop de tweede, enzovoort.

Laten we het beschrevene implementeren:

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

Bestudeer mijn oplossing en los deze taak dan zelfstandig op, zonder in mijn code te kijken.

Derde methode

Zoals te zien is, is de alinea die aan de knop is gekoppeld, zijn linkerbuur. Dit kunnen we gebruiken als koppeling:

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

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

Bestudeer mijn oplossing en los deze taak dan zelfstandig op, zonder in mijn code te kijken.