Nhiều phần tử với nút hiển thị trên JavaScript

Bây giờ giả sử chúng ta có nhiều đoạn văn và mỗi đoạn có nút riêng để ẩn:

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

Hãy thực hiện để khi nhấp vào nút, đoạn văn tương ứng sẽ được ẩn hoặc hiển thị.

Để làm điều này, chúng ta cần liên kết các nút với các đoạn văn bằng một cách nào đó. Có một số cách để thực hiện điều này.

Cách thứ nhất

Hãy liên kết các nút và đoạn văn như sau:

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

Bây giờ khi nhấp vào bất kỳ nút nào, chúng ta sẽ đọc nội dung thuộc tính data-elem của nó và tìm đoạn văn có id như vậy. Chúng ta sẽ chuyển đổi trạng thái (toggle) của đoạn văn đó. Hãy triển khai những điều đã mô tả:

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

Hãy nghiên cứu giải pháp của tôi, sau đó tự mình, không xem mã của tôi, giải quyết nhiệm vụ này.

Cách thứ hai

Việc đặt id và các thuộc tính data không thực sự thuận tiện. Hãy thực hiện để mối liên hệ được thiết lập theo số thứ tự: để nút đầu tiên ẩn đoạn văn đầu tiên, nút thứ hai - đoạn văn thứ hai và cứ thế.

Hãy triển khai những điều đã mô tả:

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

Hãy nghiên cứu giải pháp của tôi, sau đó tự mình, không xem mã của tôi, giải quyết nhiệm vụ này.

Cách thứ ba

Như có thể thấy, đoạn văn liên kết với nút là phần tử anh em liền kề phía bên trái của nó. Có thể sử dụng điều này làm mối liên hệ:

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

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

Hãy nghiên cứu giải pháp của tôi, sau đó tự mình, không xem mã của tôi, giải quyết nhiệm vụ này.