forEach() から for() に書き換えた際のアコーディオン開閉時の動作を制御したい

前提・実現したいこと

アコーディオンをクリックした際に他のアコーディオンが閉じるようにしたい。

発生している問題・エラーメッセージ

teratail の下記の記事を参考に forEach() にて希望の動作を行う事は出来ました。
アコーディオンをクリックした時に、ほかのアコーディオンを閉じる

しかし、for() を使用し同じ事を行おうとしてもエラーメッセージが無く
希望の動作を行う事が出来ません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="css/common.css">
6  <title>アコーディオンパネル</title>
7</head>
8<body>
9  <section class="ly_wrap">
10    <h2>見出し１</h2>
11    <p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
12       サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
13    <h2>見出し２</h2>
14    <p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
15       サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
16    <h2>見出し３</h2>
17    <p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
18       サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
19  </section>
20  <script src="js/main.js"></script>
21</body>
22</html>

css
1@charset "UTF-8";
2
3h2, p {
4  margin: 0;
5  padding: 0;
6}
7
8.ly_wrap {
9  width: 600px;
10  margin: 20px auto;
11}
12
13.ly_wrap h2 {
14  color: #fff;
15  background: #69b076;
16  padding: 5px;
17  border-bottom: 1px solid #eee;
18  cursor: pointer;
19  transition: all .5s;
20}
21
22.ly_wrap p {
23  background: #eee;
24  height: 150px;
25  padding: 5px;
26  transition-duration: .2s;
27}
28
29.not {
30  display: none;
31}
32

JavaScript
1'use strict';
2
3const h2 = document.querySelectorAll('.ly_wrap h2');
4const p = document.querySelectorAll('.ly_wrap p');
5
6//JavaScriptが読み込まれない際に非表示にならない為
7for(let i = 0; i < p.length; i++){
8  if(i < 1){
9    p[i].classList.remove('not');
10  } else {
11    p[i].classList.add('not');
12  };
13};
14
15for(let i = 0; i < h2.length; i++){
16  h2[i].addEventListener('click', ()=>{
17    if(p[i].className === 'not' && h2[i] === p[i]){
18      p[i].classList.remove('not');
19    } else {
20      p[i].classList.add('not');
21    };
22  });
23};
24

試したこと

その１
下記の記事をそのまま参考にしましたが、動作自体しなくなりました。

アコーディオンをクリックした時に、ほかのアコーディオンを閉じる

JavaScript
1for(let i = 0; i < h2.length; i++){
2  h2[i].addEventListener('click', ()=>{
3    if(p[i].className === 'not' && h2[i] === p[i]){
4      p[i].classList.remove('not');
5    } else {
6      p[i].classList.add('not');
7    };
8  });
9};
10

その２
this を使用しましたが、toggle() は機能しますが動作から鑑みて
制御出来ていないようです。

JavaScript
1for(let i = 0; i < h2.length; i++){
2  h2[i].addEventListener('click', ()=>{
3    if(this === p[i]){
4      p[i].classList.add('not');
5    } else {
6      p[i].classList.toggle('not');
7    };
8  });
9};

つたない説明で申し訳ありませんがご教授お願い致します。

補足情報（FW/ツールのバージョンなど）

端末：Windows10 Home
テキストエディタ：VS Code
ブラウザ：Chrome

maisumakun

2021/05/02 01:42

> しかし、for() を使用し同じ事を行おうとしてもなぜforに書き換えようと考えたのでしょうか？

m_miura1980

2021/05/02 01:51

ご返信頂きありがとうございます。動作のみを追求するのであればご指摘の通り、 forEach() にて再現出来ているので、for() にこだわる必要はないように思われるかも知れません。ただ、今回 for() にて再現出来ないか質問させて頂いた理由は、「アコーディオンをクリックした際に他のアコーディオンが閉じるようにしたい」という部分以外はどちらでも同じ動作を行う事が確認出来ています。知識の追求と理解を深める為、今回質問させていただこうと考えました。

行動規範の内容に同意します

回答1件

ベストアンサー

forでやる意味がありませんが、どうしてもというならこんな感じです

javascript
1'use strict';
2const h2 = document.querySelectorAll('.ly_wrap h2');
3const p = document.querySelectorAll('.ly_wrap p');
4for(let i = 0; i < p.length; i++){
5  p[i].classList.toggle('not',i>0);
6}
7
8for(let i = 0; i < h2.length; i++){
9  h2[i].addEventListener('click', ()=>{
10    for(let j = 0; j < p.length; j++){
11      if(i!==j) p[j].classList.add('not');
12    }
13    p[i].classList.toggle('not')
14  });
15}

投稿2021/05/02 02:44

yambejp

総合スコア116724

m_miura1980

2021/05/02 03:21

ご返信頂きありがとうございます。教えて頂いた内容を参考に動作を再現する事が出来ました。教えて頂いた件でもう少しお伺いしたい内容があります。「forでやる意味がありませんが」とありますが、それは何か理由があるのでしょうか？ for() 以外の方法が良いとされている理由など何かありましたら参考までにご教授いただければ幸いです。