Mitme elemendi nuppudega näitamine JavaScriptis

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

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

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>

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:

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

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:

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 meetod

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

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

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