Banyak Elemen dengan Butang Tunjuk pada JavaScript

Katakan sekarang kita mempunyai banyak perenggan dan setiap satunya mempunyai butang sembunyinya sendiri:

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

Mari kita buat supaya apabila diklik pada butang, perenggan yang berkaitan dengannya akan disembunyikan atau ditunjukkan.

Untuk ini, kita perlukan cara untuk mengaitkan butang dengan perenggan kita. Terdapat beberapa cara untuk melakukan ini.

Cara Pertama

Mari kaitkan butang dan perenggan seperti 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, apabila diklik pada mana-mana butang, kita akan membaca kandungan atribut data-elemnya dan mencari perenggan dengan id tersebut. Itulah yang akan kita togol. Mari kita laksanakan yang diterangkan:

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

Kaji penyelesaian saya, kemudian secara berdikari, tanpa melihat kod saya, selesaikan tugas ini.

Cara Kedua

Meletakkan id dan atribut data tidak begitu mudah. Mari kita buat supaya kaitan adalah berdasarkan nombor urutan: katakan butang pertama menyembunyikan perenggan pertama, butang kedua - perenggan kedua dan seterusnya.

Mari laksanakan yang diterangkan:

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

Kaji penyelesaian saya, kemudian secara berdikari, tanpa melihat kod saya, selesaikan tugas ini.

Cara Ketiga

Seperti yang boleh dilihat, perenggan yang berkaitan dengan butang adalah jirannya di sebelah kiri. Ini boleh digunakan sebagai kaitan:

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

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

Kaji penyelesaian saya, kemudian secara berdikari, tanpa melihat kod saya, selesaikan tugas ini.