Useita elementtejä näppäimillä JavaScriptissä

Oletetaan, että meillä on nyt useita kappaleita ja jokaisella on oma näppäinsä piilottamiseen:

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

Tehdään niin, että napin painalluksella vastaava kappale piilotetaan tai näytetään.

Tätä varten meidän on jotenkin linkitettävä napit kappaleisiimme. Tähän on olemassa useita tapoja.

Ensimmäinen tapa

Linkitetään napit ja kappaleet seuraavalla tavalla:

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

Nyt minkä tahansa napin painalluksella luemme sen data-elem-attribuutin sisällön ja etsimme kappaleen, jolla on kyseinen id. Sen me vaihdamme näkyvyyttä. Toteutetaan kuvattu:

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

Opiskele ratkaisuni ja sitten itsenäisesti, katsomatta koodiini, ratkaise tämä tehtävä.

Toinen tapa

Id:iden ja data-attribuuttien asettaminen ei ole kovin kätevää. Tehdään niin, että yhteys on järjestysnumeron mukaan: ensimmäinen näppäin piilottaa ensimmäisen kappaleen, toinen näppäin - toisen ja niin edelleen.

Toteutetaan kuvattu:

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

Opiskele ratkaisuni ja sitten itsenäisesti, katsomatta koodiini, ratkaise tämä tehtävä.

Kolmas tapa

Kuten voidaan nähdä, napin kanssa linkitetty kappale on sen vasen naapuri. Tätä voidaan käyttää yhteytenä:

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

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

Opiskele ratkaisuni ja sitten itsenäisesti, katsomatta koodiini, ratkaise tämä tehtävä.