jquery初心者です。課題で以下のようなルーレットを作っています。
1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.回転中はスタートボタンを押せなくする(ストップボタンで再び押せるようになる)
4.ルーレットの回転にランダム要素を組み込む
5.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
6.リセットボタンを押すと初期表示の状態に戻る(もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる)
ネットで他の方の実装方法など参考にし、実装はできたと思うのですが、classの指定の仕方で分からないことがあり教えてほしいです。
15行目のこちらの部分なのですが、
var td = $('<td class="num' + (i+j) +'">');
classをclass=""のように、囲むのは分かりますが、なぜ + (i+j) + の部分も
' ' で囲わなくてはいけないのでしょうか…
そしてこの部分は、ダブルクォーテーションでなくシングルクォーテーションでないと、動きませんでした。
ダブルクォーテーションの中にもう一つクォーテーションを入れるときはシングルじゃないといけないのでしょうか。
何卒宜しくお願い致します。
↓ルーレット↓
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="roulette.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ var number = 0; var interval_id; for (var j = 0; j <= 12; j+=4){ var tr = $("<tr>"); for (var i = 1; i <= 4; i++){ var td = $('<td class="num' + (i+j) +'">'); td.html(i+j); tr.append(td); } $("#matrix").append(tr); } $("#start").on("click",function(){ interval = setInterval(count,100); $("#start").prop("disabled",true); }); $("#stop").on("click",function(){ clearInterval(interval); $("#start").prop("disabled",false); }); $("#reset").on("click",function(){ clearInterval(interval); $(".num" + number).css("background-color","#ffffff"); $("#start").prop("disabled",false); }); function count(){ $(".num" + number).css("background-color","#ffffff"); number = 1 + Math.floor(Math.random()*16); $(".num" + number).css("background-color","#f08080"); } }); </script> </head> <body> <div id="rouolette"> <table id="matrix"> </table> <div id="button_erea"> <button id ="start">スタート</button> <button id ="stop">ストップ</button> <button id ="reset">リセット</button> </div> </div> </body> </html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/08 04:38
2020/02/08 04:43
2020/02/08 05:01