Useita elementtejä näppäimillä JavaScriptissä

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

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

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

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

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

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:

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

Kolmas tapa

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

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

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