Много елементи с бутони за показване на JavaScript

Нека сега имаме много параграфи и всеки има свой бутон за скриване:

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

Нека направим така, че при кликване на бутона да се скрива или показва съответстващият му параграф.

За да направим това, по някакъв начин трябва да свържем бутоните с нашите параграфи. За това има няколко начина.

Първи начин

Нека свържем бутоните и параграфите по следния начин:

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>

Сега при кликване на който и да е бутон ще четем съдържанието на неговия атрибут data-elem и ще търсим параграф с такова id. Него ще променяме видимостта. Нека реализираме описаното:

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

Втори начин

Поставянето на id и data-атрибути не е много удобно. Нека направим така, че връзката да е по пореден номер: нека първият бутон скрива първия параграф, вторият бутон - втория и така нататък.

Нека реализираме описаното:

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

Трети начин

Както може да се види, параграфът, свързан с бутона, е негов ляв съсед. Можем да използваме това като връзка:

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

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