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

제 솔루션을 학습한 후, 제 코드를 보지 않고 스스로 이 문제를 해결해 보세요.