Banyak Elemen dengan Tombol Tampil di JavaScript

Sekarang anggap kita memiliki banyak paragraf dan setiap paragraf memiliki tombolnya sendiri untuk menyembunyikan:

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

Mari kita buat agar ketika tombol diklik, paragraf yang sesuai akan disembunyikan atau ditampilkan.

Untuk melakukan ini, kita perlu menghubungkan tombol-tombol dengan paragraf kita. Ada beberapa cara untuk melakukan ini.

Cara Pertama

Mari hubungkan tombol dan paragraf dengan cara berikut:

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

Sekarang, dengan mengklik tombol apa pun, kita akan membaca isi atribut data-elem-nya dan mencari paragraf dengan id tersebut. Itulah yang akan kita toggle. Mari kita implementasikan yang dijelaskan:

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

Pelajari solusi saya, lalu secara mandiri, tanpa melihat kode saya, selesaikan tugas ini.

Cara Kedua

Memberikan id dan atribut data tidak terlalu nyaman. Mari kita buat agar koneksi berdasarkan urutan: misalkan tombol pertama menyembunyikan paragraf pertama, tombol kedua - paragraf kedua, dan seterusnya.

Mari kita implementasikan yang dijelaskan:

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

Pelajari solusi saya, lalu secara mandiri, tanpa melihat kode saya, selesaikan tugas ini.

Cara Ketiga

Seperti yang bisa dilihat, paragraf yang terhubung dengan tombol adalah tetangganya di sebelah kiri. Kita bisa menggunakan ini sebagai koneksi:

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

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

Pelajari solusi saya, lalu secara mandiri, tanpa melihat kode saya, selesaikan tugas ini.