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

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>ボックスＡＢＣ</p>
16        <div id="q50_a">Ａ</div>
17        <div id="q50_b">Ｂ</div>
18        <div id="q50_c">Ｃ</div>
19</div>
20     
21<div id="q50_box01">
22    <p>Ａ</p>
23</div>
24     
25<div id="q50_box02">
26    <p>Ｂ</p>
27</div>
28     
29<div id="q50_box03">
30    <p>Ｃ</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を使わずに同じプログラムを書くことはかのうでしょうか。

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

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

回答2件

ベストアンサー

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

総合スコア146550

tou.23.bc

2022/01/14 12:22

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

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

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

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

投稿2022/01/14 04:54

yambejp

総合スコア117678

tou.23.bc

2022/01/14 12:23

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

質問する

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

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

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

関連した質問