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:

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

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

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

for (let button of buttons) {
	button.addEventListener('click', function() {
		let elem = document.querySelector('#' + this.dataset.elem);
		elem.classList.toggle('hidden');
	});
}

Benim çözümümü inceleyin, ardından kendi başınıza, benim koduma bakmadan bu görevi çözün.

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

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

Benim çözümümü inceleyin, ardından kendi başınıza, benim koduma bakmadan bu görevi çözün.

Üçüncü Yöntem

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

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

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

Benim çözümümü inceleyin, ardından kendi başınıza, benim koduma bakmadan bu görevi çözün.