質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

javascriptの記述をシンプルにする

MskKmt
MskKmt

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

301閲覧

投稿2022/01/28 08:52

編集2022/02/04 11:01

前提・実現したいこと

スマホ用のハンバーガーボタンの「開く」、「閉じる」をjavascriptで記述しました。
現状、動くには動くのですが、javascriptの記述をもっとシンプルにしたいです。

「for文と配列使えば上手くいくのでは?」と思い、試行錯誤しているのですが、難航しています。
javascriptは勉強中の為、あまり詳しくはありません。
ご助言して頂けたら幸いです。

該当のソースコード

HTML

<body id="page-top"> <header id="top"> <!-- ハンバーガーボタン --> <div id="nav-btn"><span></span></div> <!-- ナビゲーションメニュー --> <div id="nav-area"> <nav> <div class="dis-tbl_tab02 w1200 m-0a"> <a href="#" class="dis-tblcl01">HOME</a> <a href="#" class="dis-tblcl01">ABOUT US<span class="dis-non">(アクアマリーナについて)</span></a> <a href="#" class="dis-tblcl01">QUALITY<span class="dis-non">(徹底した品質管理)</span></a> <div class="dis-tblcl02"><span class="arrow-b">PRODUCTS</span> <ul id="fade-in2"> <li><a href="#">ISUP<span class="dis-non">(スタンドアップパドルボード)</span></a></li> <li><a href="#">KAYAKS<span class="dis-non">(カヤック)</span></a></li> <li><a href="#">BOATS<span class="dis-non">(ゴムボート)</span></a></li> <li><a href="#">ACCESSORY<span class="dis-non">(アクセサリー)</span></a></li> </ul> </div> <a href="#" target="_blank" class="dis-tblcl01"><span class="outlink">NEWS</span></a> <a href="shop/" class="dis-tblcl01">SHOP</a> <div class="dis-tblcl02"><span class="arrow-b">SUPPORT</span> <ul id="fade-in3"> <li><a href="#">FAQ(よくある質問)</a></li> <li><a href="#">製品の保証について</a></li> <li><a href="#">ユーザーマニュアル</a></li> </ul> </div> <div class="dis-tblcl03"> <a href="#" target="_blank"><span>Instagram</span></a> </div> </div><!-- /.dis-tbl_tab02 --> <p id="nav-btn_cl"></p> </nav> </div> </header> </body>

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。