Q&A
jQueryを使用してclassを追加しようとした際、addClassに指定した変数の値がclassに設定されない
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <script src ="https://code.jquery.com/jquery-3.0.0.js"></script> <script src ="https://code.jquery.com/jquery-migrate-3.3.2.js"></script> </head> <body> <table> <thead> <tr> <th id="title"> 電卓 </th> </tr> </thead> <tbody> <tr> <td >0</td> <td class="hidden-td"></td> <td class="hidden-td"></td> <td id="clear">C</td> </tr> <tr> <td class="num">7</td> <td class="num">8</td> <td class="num">9</td> <td>÷</td> </tr> <tr> <td class="num">4</td> <td class="num">5</td> <td class="num">6</td> <td>×</td> </tr> <tr> <td class="num">1</td> <td class="num">2</td> <td class="num">3</td> <td>-</td> </tr> <tr> <td>0</td> <td>.</td> <td>+</td> <td>=</td> </tr> </tbody> </table> <script src="main.js"></script> </body> </html>
main.js
"use strict"; { jQuery(function(){ for(var i=0;i<jQuery('.num').length;i++){ var num = i+1; jQuery('.num').eq(i).addClass(num); } }); }
回答1件
0
ベストアンサー
このようにすれば動いているのは分かると思いますが、
js
1 for(var i=0;i<jQuery('.num').length;i++){ 2 console.log(i) 3 var num = i+1; 4 jQuery('.num').eq(i).addClass(num); 5 }
前提として数値で始まるクラス名、IDが指定できないからでは。
id名/class名に使用できる文字の種類
【備忘録】idやclassの先頭文字に数字は使えないけど、使いたいときにやること（使いたい時は、数字をエスケープする）
こうすると振られます。
js
1 for(var i=0;i<jQuery('.num').length;i++){ 2 var num = "a"+(i+1); 3 jQuery('.num').eq(i).addClass(num); 4 }
(i+1)としたのは足し算させるため。
"a"+i+1のようにすると文字列連結のみが働き i+1が計算されません。
投稿2021/04/28 21:24
編集2021/04/28 22:56
総合スコア80861
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/29 14:16
2021/04/29 14:18