Q&A
ありがとうございます。
参考になりました。
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件
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
総合スコア142256
0
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
総合スコア109931
回答へのコメント
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/01/14 12:22