Flere elementer med visningsknapper i JavaScript

La oss nå anta at vi har mange avsnitt og hvert av dem har sin egen knapp for skjuling:

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

La oss gjøre det slik at ved et klikk på knappen skjules eller vises det tilsvarende avsnittet.

For å gjøre dette må vi på en eller annen måte koble knappene til våre avsnitt. Det finnes flere måter å gjøre dette på.

Første metode

La oss koble knapper og avsnitt på følgende måte:

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

Nå, ved et klikk på en hvilken som helst knapp, vil vi lese innholdet i dens data-elem-attributt og søke etter et avsnitt med en slik id. Det er den vi vil toggle. La oss implementere det som er beskrevet:

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 løsningen min, og løs deretter denne oppgaven på egen hånd, uten å se på koden min.

Andre metode

Det er ikke veldig praktisk å sette id og data-attributter. La oss gjøre det slik at koblingen skjer ved rekkefølgenummer: la den første knappen skjule det første avsnittet, den andre knappen - det andre, og så videre.

La oss implementere det som er beskrevet:

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 løsningen min, og løs deretter denne oppgaven på egen hånd, uten å se på koden min.

Tredje metode

Som man kan se, er avsnittet knyttet til knappen dens venstre nabo. Dette kan brukes som en kobling:

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

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

Studer løsningen min, og løs deretter denne oppgaven på egen hånd, uten å se på koden min.