Шмат элементаў з кнопкамі паказу на JavaScript

Хай цяпер у нас ёсць шмат абзацаў і ў кожнага свая кнопка для схавання:

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

Зробім так, каб па кліку на кнопку схаваўся ці паказваўся адпаведны ёй абзац.

Для гэтага нам якімсьці чынам трэба звязаць кнопкі з нашымі абзацамі. Для гэтага існуе некалькі спосабаў.

Першы спосаб

Звяжам кнопкі і абзацы наступным чынам:

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

Цяпер па кліку на любую кнопку мы будзем чытаць змесціва яе атрыбуту data-elem і шукаць абзац з такім id. Яго і будзем тагліць. Рэалізуем апісанае:

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

Вывучыце маё рашэнне, а затым самастойна, не падглядваючы ў мой код, вырашыце гэтую задачу.

Другі спосаб

Расстаўляць id і data-атрыбуты не вельмі зручна. Давайце зробім так, каб сувязь была па парадкавым нумары: хай першая кнопка схавае першы абзац, другая кнопка - другі і гэтак далей.

Рэалізуем апісанае:

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

Вывучыце маё рашэнне, а затым самастойна, не падглядваючы ў мой код, вырашыце гэтую задачу.

Трэці спосаб

Як можна ўбачыць, абзац, звязаны з кнопкай, з'яўляецца яе суседам злева. Можна гэта выкарыстаць у якасці сувязі:

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

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

Вывучыце маё рашэнне, а затым самастойна, не падглядваючы ў мой код, вырашыце гэтую задачу.