Mnoho prvků s tlačítky zobrazení v JavaScriptu

Nyní předpokládejme, že máme mnoho odstavců a každý má své vlastní tlačítko pro skrytí:

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

Uděláme to tak, aby po kliknutí na tlačítko byl skryt nebo zobrazen odpovídající odstavec.

K tomu musíme nějakým způsobem propojit tlačítka s našimi odstavci. Pro to existuje několik způsobů.

První způsob

Propojíme tlačítka a odstavce následujícím způsobem:

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>

Nyní po kliknutí na libovolné tlačítko budeme číst obsah jeho atributu data-elem a hledat odstavec s takovým id. Ten budeme přepínat. Realizujme popsané:

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

Druhý způsob

Rozmisťovat id a data-atributy není příliš pohodlné. Pojďme to udělat tak, aby propojení bylo podle pořadového čísla: ať první tlačítko skrývá první odstavec, druhé tlačítko - druhý a tak dále.

Realizujme popsané:

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

Třetí způsob

Jak lze vidět, odstavec spojený s tlačítkem je jeho sousedem vlevo. To lze použít jako propojení:

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

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