Многу елементи со копчиња за прикажување во 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. Тој ќе го вклучуваме/исклучуваме (toggle). Да го имплементираме опишаното:

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