Mitme elemendi nuppudega näitamine JavaScriptis

Olgu meil nüüd mitu lõigu ja igaühel oma nupp peitmiseks:

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

Teeme nii, et nupule klõpsates peidetakse või kuvatakse vastav lõik.

Selleks peame kuidagi seostama nupud meie lõikudega. Selleks on olemas mitu meetodit.

Esimene meetod

Seostame nupud ja lõigud järgmiselt:

<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üüd saame mis tahes nupule klõpsates lugeda selle data-elem atribuudi sisu ja otsida lõiku selle id-ga. Seda me ka toggle'ime. Rakendame kirjeldatu:

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

Uurige minu lahendust ja seejärel iseseisvalt, ilma minu koodi peale vahtimata, lahendage see ülesanne.

Teine meetod

Id-de ja data-atribuutide paigutamine pole eriti mugav. Teeme nii, et seos oleks järjekorranumbri järgi: olgu esimene nupp peidab esimese lõigu, teine nupp - teise jne.

Rakendame kirjeldatu:

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

Uurige minu lahendust ja seejärel iseseisvalt, ilma minu koodi peale vahtimata, lahendage see ülesanne.

Kolmas meetod

Nagu näha, on lõik, mis on seotud nupuga, selle vasakpoolne naaber. Seda saab kasutada seose loomiseks:

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

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

Uurige minu lahendust ja seejärel iseseisvalt, ilma minu koodi peale vahtimata, lahendage see ülesanne.