Flere elementer med vis/skjul knapper i JavaScript

Lad os nu antage, at vi har mange afsnit, og hver af dem har sin egen knap til at skjule:

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

Lad os gøre sådan, at når der klikkes på en knap, skjules eller vises det tilsvarende afsnit.

For at gøre dette skal vi på en eller anden måde forbinde knapperne med vores afsnit. Der er flere måder at gøre dette på.

Første metode

Lad os forbinde knapper og afsnit på følgende måde:

<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 vil vi, ved at klikke på en hvilken som helst knap, læse indholdet af dens data-elem attribut og lede efter et afsnit med det id. Det er den, vi vil toggle. Lad os implementere det beskrevne:

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

Studer min løsning, og løs derefter selvstændigt, uden at kigge på min kode, denne opgave.

Anden metode

Det er ikke særlig praktisk at sætte id'er og data-attributter. Lad os gøre sådan, at forbindelsen er baseret på rækkefølgen: lad den første knap skjule det første afsnit, den anden knap - det andet og så videre.

Lad os implementere det beskrevne:

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

Studer min løsning, og løs derefter selvstændigt, uden at kigge på min kode, denne opgave.

Tredje metode

Som det kan ses, er afsnittet forbundet med knappen dens venstre nabo. Dette kan bruges til at etablere forbindelsen:

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

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

Studer min løsning, og løs derefter selvstændigt, uden at kigge på min kode, denne opgave.