### 前提・実現したいことスマホ用のハンバーガーボタンの「開く」、「閉じる」をjavascriptで記述しました。現状、動くには動くのですが、javascriptの記述をもっとシンプルにしたいです。「for文と配列使えば上手くいくのでは？」と思い、試行錯誤しているのですが、難航しています。 javascriptは勉強中の為、あまり詳しくはありません。ご助言して頂けたら幸いです。 ### 該当のソースコード ```HTML

``` ```javascript (function () { window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }; const target0 = document.getElementById('nav-btn'); const target1 = document.getElementById('nav-btn_cl'); const target2 = document.getElementById('nav-area'); const target3 = document.getElementById('page-top'); if (target0) { target0.addEventListener('click', function(){ target0.classList.toggle('close'); target1.classList.toggle('close'); target2.classList.toggle('slide-in'); target3.classList.toggle('noscroll'); }, false); } if (target1) { target1.addEventListener('click', function(){ target0.classList.toggle('close'); target1.classList.toggle('close'); target2.classList.toggle('slide-in'); target3.classList.toggle('noscroll'); }, false); } }()); ``` ```css .w1200 {max-width: 1200px;} a{color: #000; text-decoration: underline; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} a:hover {color: #ec1b23;} /* グローバルメニュー */ nav {background: #3d3d3d;} nav .dis-tbl_tab02 {padding:0 15px; font-family: Midashi Go MB31;} nav .dis-tblcl01 {vertical-align: middle;} nav .dis-tblcl02 { position: relative; padding:10px 0; color: #fff; font-size: 15px; text-align: center; vertical-align: middle;} nav a{ margin: 0; color: #fff; font-size: 15px; text-align: center; text-decoration: none; line-height: 1;} nav a:hover {color: #fff;} nav a.dis-tblcl01:hover {background:#ec1b23;} nav a.dis-tblcl03:hover {opacity: 0.75;} @media screen and (max-width:799px) and (min-width:700px){ nav .dis-tblcl02 {width: 110px;} } @media screen and (max-width: 699px){ nav {background: #fff;} nav .dis-tbl_tab02, nav .dis-tblcl01, nav .dis-tblcl02, nav .dis-tblcl03 {display: block; box-sizing: border-box; width: 100%; text-align: left;} nav a { display: block; padding: 15px 10px; border-bottom:solid #515859 1px; color: #515859; text-align:left;} nav a span.dis-non {display: inline;} nav .dis-tbl_tab02 {padding:15px;} nav .dis-tblcl02, nav .dis-tblcl03 {padding:0;} nav .dis-tblcl02 span {display:none;} nav .dis-tblcl02 span.dis-non {display: inline;} nav .dis-tblcl03 a { box-sizing: border-box; width: 100%; height:auto; background:none; text-indent:0;} nav .dis-tblcl03 span {position: relative; display: inline-block; padding:0 18px 0 0;} nav .dis-tblcl03 span:after { content: url("../images/gaibu_bk.png"); display: inline-block; position:absolute; top:50%; right:0; margin:-7px 0 0;} /**============================================================================================**/ /* javascriptを使用したハンバーガーボタン */ #nav-btn { display: block; position: absolute; top: 16px; right: 10px; z-index: 3; width: 28px; height: 28px; cursor: pointer;} #nav-btn.close { position: fixed; right: 300px; z-index: 10001; width: 100vw; height: 100vh;} #nav-btn::before, #nav-btn::after, #nav-btn span { content: ''; display: block; position: absolute; left: 0px; width: 28px; height: 4px; background: #e5f7fb;} #nav-btn::before {top: 0px;} #nav-btn::after {bottom: 0px;} #nav-btn span {top: 50%; margin: -2px 0 0;} #nav-btn.close::before, #nav-btn.close::after, #nav-btn.close span { display: none;} /* 閉じるボタン */ #nav-btn_cl { display: block; position: absolute; top: 18px; right: 10px; z-index: 10003; width: 28px; height: 28px; cursor: pointer;} #nav-btn_cl::before, #nav-btn_cl::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 28px; height: 4px; background: #1fc08e;} #nav-btn_cl::before { transform: translateX(-50%) translateY(-3px) rotate(45deg); -webkit-transform: translateX(-50%) translateY(-3px) rotate(45deg);} #nav-btn_cl::after { transform: translateX(-50%) translateY(-3px) rotate(-45deg); -webkit-transform: translateX(-50%) translateY(-3px) rotate(-45deg);} /* グローバルメニュー表示エリア */ #nav-area { position: fixed; top: 0; left: 0; z-index: 10000; width: 0vw; height: 100vh; background: rgba(0,0,0,0.00); transition: background 0.8s;} #nav-area.slide-in { width: 100vw; background: rgba(0,0,0,0.40); transition: background 0.8s;} #nav-area nav { position: fixed; top: 0; left: auto; right: 0; z-index: 10002; width: 300px; height: 100%; background: #fff; transform: translateX(100%); transition: 0.8s;} #nav-area.slide-in nav { transform: translateX(0); transition: 0.8s;} } @media screen and (max-width:499px){ #nav-btn.close {width: 0;} #nav-area nav { width: 100%;} } ``` ### 試したこと target0~3が数字なのでfor文を使ってtargetの数字の部分を変えようとしました。また、.classList.toggleで使っているclass名を配列にして使う予定でした。 ※そもそも書き方が間違っているかもしれません。ご容赦下さい。 ```javascript const getId = ['nav-btn','nav-btn_cl','nav-area','page-top']; const byClass = ['close','close','slide-in','noscroll']; for (let number = 0; number <= 3; number ++) { const target(number) = document.getElementById(getId[number]); } for (let number1 = 0; number <= 3; number ++) { if (target0) { target0.addEventListener('click', function(){ target(number1).classList.toggle(byClass[number1]); }, false); } if (target1) { target1.addEventListener('click', function(){ target(number1).classList.toggle(byClass[number1]); }, false); } } ```

	@@ -1 +1 @@
1	- javascriptの記述を
1	+ javascriptの記述をシンプルにする

質問編集履歴