JavaScript'te Çoklu Elemanları Düğmelerle Gösterme

Şimdi diyelim ki birden fazla paragrafımız var ve her birinin gizleme için kendi düğmesi var:

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

Bir düğmeye tıklandığında, ona karşılık gelen paragrafın gizlenmesini veya gösterilmesini sağlayalım.

Bunun için düğmeleri paragraflarımızla bir şekilde ilişkilendirmemiz gerekiyor. Bunun için birkaç yöntem bulunmaktadır.

Birinci Yöntem

Düğmeleri ve paragrafları şu şekilde ilişkilendirelim:

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>

Şimdi herhangi bir düğmeye tıklandığında, onun data-elem niteliğinin içeriğini okuyacağız ve o id'ye sahip paragrafı arayacağız. Onu açıp kapatacağız (toggle). Açıklananı uygulayalım:

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

İkinci Yöntem

id ve data-nitrikleri ayarlamak pek kullanışlı değil. İlişkinin sıra numarasına göre olmasını sağlayalım: ilk düğme ilk paragrafı gizlesin, ikinci düğme ikinciyi gizlesin ve böyle devam etsin.

Açıklananı uygulayalım:

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

Üçüncü Yöntem

Görülebileceği gibi, düğmeyle ilişkili paragraf, onun solundaki komşusudur. Bunu ilişki olarak kullanabiliriz:

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

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