Baie Elemente met Knoppe om te Wys in JavaScript

Laat ons nou baie paragrawe hê, en elkeen het sy eie knoppie om te versteek:

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

Laat ons dit so maak dat wanneer op 'n knoppie geklik word, die ooreenstemmende paragraaf versteek of gewys word.

Om dit te doen, moet ons op een of ander manier die knoppies met ons paragrawe verbind. Daar is verskeie maniere om dit te doen.

Eerste Metode

Laat ons die knoppies en paragrawe soos volg verbind:

<p id="elem1">1</p><button data-elem="elem1">wissel</button>
<p id="elem2">2</p><button data-elem="elem2">wissel</button>
<p id="elem3">3</p><button data-elem="elem3">wissel</button>

Nou, wanneer op enige knoppie geklik word, sal ons die inhoud van sy data-elem kenmerk lees en die paragraaf met daardie id soek. Dit is wat ons sal wissel. Laat ons die beskrywing implementeer:

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 my oplossing, en los dan hierdie probleem self op, sonder om na my kode te kyk.

Tweede Metode

Dit is nie baie gerieflik om id's en data-kenmerke te plaas nie. Kom ons maak dit so dat die verbinding volgens volgnommer is: laat die eerste knoppie die eerste paragraaf versteek, die tweede knoppie - die tweede, ensovoorts.

Laat ons die beskrywing implementeer:

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 my oplossing, en los dan hierdie probleem self op, sonder om na my kode te kyk.

Derde Metode

Soos gesien kan word, is die paragraaf wat met die knoppie verbind is, die linkerbuurman daarvan. Dit kan gebruik word as 'n verbinding:

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

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

Bestudeer my oplossing, en los dan hierdie probleem self op, sonder om na my kode te kyk.