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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

3回答

1846閲覧

このコードをswitch文を使って置き換えることは出来ますか?

Tubuanpan

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2018/05/11 20:14

前提・実現したいこと

押されたボタンに応じて、処理を分けるという単純なものなのですが、if文だと可読性が下がるので出来ればswitch文で代用したいです。何か方法はありますでしょうか?

該当のソースコード

//HTML <button class="btn btn1">1</button> <button class="btn btn2">2</button> <button class="btn btn3">3</button> <button class="btn btn4">4</button> <button class="btn btn5">5</button> //Javascript let btn = document.getElementsByClassName('btn'); for (let i = 0, len = btn.length; i < len; i++) { btn[i].addEventListener('click', btnClick); } function btnClick() { if (this.classList.contains('btn1')) { console.log('btn1'); } else if (this.classList.contains('btn2')) { console.log('btn2'); } else if (this.classList.contains('btn3')) { console.log('btn3'); } else if (this.classList.contains('btn4')) { console.log('btn4'); } else if (this.classList.contains('btn5')) { console.log('btn5'); } }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/11 21:01

HTMLとJavaScriptはコードブロックをわけてください。
m.ts10806

2018/05/11 21:11

「処理を分ける」内容によっても対応が異なってくるように思います。どのような処理が続くのか簡単で結構ですので追記していただけますか?
m.ts10806

2018/05/11 21:35

もう1点。btn1,btn2のようになっていますが必ず数字で割り振られているのでしょうか?
guest

回答3

0

ベストアンサー

addEventListener

JavaScript

1btn[i].addEventListener('click', btnClick);

現在の addEventListener は第三引数を省略可能ですが、後方互換性の為に、第三引数は省略しない事をお勧めします。

switch 文

JavaScript

1function btnClick (event) { 2 for (let token of event.currentTarget.classList) { 3 switch (token) { 4 case 'btn1': 5 case 'btn2': 6 case 'btn3': 7 case 'btn4': 8 case 'btn5': 9 console.log(token); 10 break; 11 } 12 } 13}

RegExp.prototype.test

JavaScript

1function btnClick (event) { 2 for (let token of event.currentTarget.classList) { 3 if (/^btn\d+$/.test(token)) { 4 console.log(token); 5 break; 6 } 7 } 8}

data-*属性

HTML

1<button class="btn" data-index="1">1</button> 2<button class="btn" data-index="2">2</button> 3<button class="btn" data-index="3">3</button> 4<button class="btn" data-index="4">4</button> 5<button class="btn" data-index="5">5</button> 6<button class="btn" data-index="6">6</button> 7<button class="btn" data-index="7">7</button> 8<button class="btn" data-index="8">8</button> 9<button class="btn" data-index="9">9</button> 10<script> 11'use strict'; 12function handleClick (event) { 13 const index = event.currentTarget.getAttribute('data-index'); 14 15 if (/[1-5]/.test(index)) { 16 console.log('btn' + index); 17 } 18} 19 20for (let btn of document.querySelectorAll('.btn')) { 21 btn.addEventListener('click', handleClick, false); 22} 23</script>

Bubbling Phase

目的次第ですが、私は基本的にこの方法を使います。

HTML

1<p id="btn-group"> 2 <button class="btn" data-index="1">1</button> 3 <button class="btn" data-index="2">2</button> 4 <button class="btn" data-index="3">3</button> 5 <button class="btn" data-index="4">4</button> 6 <button class="btn" data-index="5">5</button> 7 <button class="btn" data-index="6">6</button> 8 <button class="btn" data-index="7">7</button> 9 <button class="btn" data-index="8">8</button> 10 <button class="btn" data-index="9">9</button> 11</p> 12<script> 13'use strict'; 14function handleClick (event) { 15 const index = +event.target.getAttribute('data-index'); 16 17 if (index < 6) { 18 console.log('btn' + index); 19 } 20} 21 22document.getElementById('btn-group').addEventListener('click', handleClick, false); 23</script>

Re: Tubuanpan さん

投稿2018/05/12 01:46

編集2018/05/12 02:48
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/05/12 02:00

consle ⇒ console
think49

2018/05/12 02:06 編集

To: kei344 さん ご指摘ありがとうございます。修正しました。
Tubuanpan

2018/05/13 08:52

解決いたしました!!ありがとうございます
guest

0

コードを減らす目的なら、文字定数を配列にして
それをループで回せば if文ひとつになります。

ただ、ベストな解がどれかってのは全体を知ってる
ご本人だけでしょうから、最終的にはご自分で
判断するです。

まあ、「本当に」必要なら if文の羅列も
やむなしという局面もあるかもしれません。

投稿2018/05/12 01:08

takasima20

総合スコア7458

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/12 03:16

JavaScript側が扱いやすいようhtml側で調整した方がいいかもしれませんしね。 今のままだとswitchにしたからと可読性があがるとは思えません。
guest

0

とりあえず思いつくものとしては、正規表現を使って抜き出すとかでしょうか?

js

1let btns = document.getElementsByClassName('btn'); 2 3Array.prototype.forEach.call(btns,(b)=>{ 4 b.addEventListener('click',()=>{ 5 let n = parseInt(b.getAttribute("class").match(/btn(\d)/)[1]); 6 switch(n){ 7 case 1: 8 console.log('btn1'); 9 break; 10 case 2: 11 console.log('btn2'); 12 break; 13 case 3: 14 console.log('btn3'); 15 break; 16 case 4: 17 console.log('btn4'); 18 break; 19 case 5: 20 console.log('btn5'); 21 break; 22 default: 23 console.log('?'); 24 break; 25 } 26 }); 27});

上記は数値での場合分けです。書いた後に気づきましたが、jsなら文字列でも場合分けできましたね。まぁ好みな方法でどうぞ。

投稿2018/05/11 21:16

編集2018/05/11 21:18
namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問