JavaScriptでの複数要素と表示ボタン

ここでは、複数の段落があり、それぞれに非表示にするための独自のボタンがあるとします：

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

ボタンをクリックすると、対応する段落が非表示または表示されるようにしましょう。

そのためには、何らかの方法でボタンと段落を関連付ける必要があります。これにはいくつかの方法があります。

方法1

以下のようにボタンと段落を関連付けます：

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

私の解決策を確認した後、私のコードを見ずに、この課題を自分で解決してください。

方法2

idやdata属性を設定するのはあまり便利ではありません。代わりに、順序番号で関連付けましょう：最初のボタンは最初の段落を、2番目のボタンは2番目の段落を、というようにします。

これを実装します：

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

私の解決策を確認した後、私のコードを見ずに、この課題を自分で解決してください。

方法3

ボタンに関連する段落は、その左隣の要素であることがわかります。この関係を利用できます：

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

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

私の解決策を確認した後、私のコードを見ずに、この課題を自分で解決してください。