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

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

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

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

Q&A

解決済

2回答

397閲覧

jQuery switch分の中のvarを他の書き方でかく方法について

tou.23.bc

総合スコア50

JavaScript

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

0グッド

0クリップ

投稿2022/01/14 04:49

js

1 $(() => { 2 3 $("p.button").click(() => { 4 let aaa = $("#q50_box00").children("div").length; 5 let i = 0; 6 while (i < aaa){ 7 funcReturnDiv(); 8 i++; 9 } 10 }); 11 12 13 function funcReturnDiv(){ 14 let divID = $("#q50_box00 div:last-child").attr("id").substr(0,5); 15 switch (divID){ 16 case "q50_a": 17 var returnDiv = $("#q50_box01").after(); 18 break; 19 case "q50_b": 20 var returnDiv = $("#q50_box02").after(); 21 break; 22 case "q50_c": 23 var returnDiv = $("#q50_box03").after(); 24 break; 25 } 26 $("#q50_box00").children("div:last-child").prependTo(returnDiv); 27 } 28 });

HTML

1<!DOCTYPE html> 2<html lang=" ja"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<link rel="stylesheet" href="style.css"> 8<title>Document</title> 9</head> 10<body> 11<!-- HTML --> 12<!-- HTML --> 13<p class="button">ぼたん</p> 14<div id="q50_box00"> 15 <p>ボックスABC</p> 16 <div id="q50_a">A</div> 17 <div id="q50_b">B</div> 18 <div id="q50_c">C</div> 19</div> 20 21<div id="q50_box01"> 22 <p>A</p> 23</div> 24 25<div id="q50_box02"> 26 <p>B</p> 27</div> 28 29<div id="q50_box03"> 30 <p>C</p> 31</div> 32 33 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 34 <script src="js/main.js"></script> 35</body> 36</html>

css

1/* CSS */ 2.button { 3 padding: 5px 10px; 4 border:#666 solid 1px; 5 background:#FFF; 6 display:inline-block; 7 text-align:center; 8 cursor:pointer; 9} 10#q50_box00 { 11 width:240px; 12 height:115px; 13 display:block; 14 background:#999; 15 color:#FFF; 16 font-size:30px; 17 text-align:center; 18 float:left; 19 margin:10px; 20 21} 22#q50_box01, 23#q50_box02, 24#q50_box03 { 25 width:80px; 26 height:115px; 27 display:block; 28 background:#999; 29 color:#FFF; 30 font-size:30px; 31 text-align:center; 32 float:left; 33 margin:10px; 34} 35#q50_box00 div, 36#q50_box01 div, 37#q50_box02 div, 38#q50_box03 div { 39 width:50px; 40 height:50px; 41 margin:10px; 42 background:#333; 43 display:inline-block; 44 line-height:50px; 45 46}

javacsript のswitch文の中身について質問です。

varをletに書き換えると、エラーが発生します。
varは重複代入できるようですが、letはできないようです。

varを使わずに同じプログラムを書くことはかのうでしょうか。

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

switchに入る手前で宣言しましょう。

javascript

1 function funcReturnDiv(){ 2 let divID = $("#q50_box00 div:last-child").attr("id").substr(0,5); 3 let returnDiv; 4 switch (divID){ 5 case "q50_a": 6 returnDiv = $("#q50_box01").after(); 7 break; 8 case "q50_b": 9 returnDiv = $("#q50_box02").after(); 10 break; 11 case "q50_c": 12 returnDiv = $("#q50_box03").after(); 13 break; 14 }

投稿2022/01/14 11:35

maisumakun

総合スコア145064

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

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

tou.23.bc

2022/01/14 12:22

ありがとうございます。参考になりました。
guest

0

q50_a,b,cとq50_box01,2,3の対比表を作っておけばよいでしょう
もしくはq50_a,b,cのdivにカスタムデータとしてq50_box01,2,3の情報を埋め込んでおくことです

HTML

1<div id="q50_a">A</div> 2↓↓↓ 3<div id="q50_a" data-target="#q50_box01">A</div>

投稿2022/01/14 04:54

yambejp

総合スコア114505

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

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

tou.23.bc

2022/01/14 12:23

ありがとうございます。 参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問