Q&A
.numの使い方が変ですね。
クラスなんだから数字と組み合わせる必要はないでしょう
.num:not(.stop)とかでフィルタすればよいでしょう
jqueryでルーレットを作成しまして、以下の要件を満たすものを作成しました。
１．ルーレットの目を16個作成する
２．スタートボタンを押すとルーレットが回転する
３．回転中はスタートボタンを押せなくする（ストップボタンで再び押せるようになる）
４．ルーレットの回転にランダム要素を組み込む
５．ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
６．ストップボタンを押した目が、ユーザに分かるようにする（目の色が変わるなど）
７．一度ストップボタンで停止した目は次回以降は停止しない
８．スタートとストップを16回の繰り返しで、全ての目に停止する
９．16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
１０．過去に停止した目が何か、ユーザに分かるようにする（目に色がつくなど）
１１．リセットボタンを押すと初期表示の状態に戻る（もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる）
１２．（ソースコード）比較演算子は、「===」や「!==」を利用すること
そして、以下の通り実装ができました。
<!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 numbers =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; var interval_id,tr,td; for (var j = 0; j <= 12; j+=4){ tr = $("<tr>"); for (var i = 1; i <= 4; i++){ 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").prop("disabled",false);//ルーレット動作中はストップボタンを押せるようにする }); $("#stop").on("click",function(){ clearInterval(interval);//1-16の数字の選択を止める numbers.splice(index,1);//配列のキー＋1が値。配列の中から、ストップ時に選択した配列の中の値を消す console.log(numbers); if (numbers.length === 0){// 配列の中身が0になったら $("#start").prop("disabled",true);//スタートボタンを押せなくする } else if(numbers.length !== 0){// 配列の中身が0以外の場合、 $("#start").prop("disabled",false);//スタートボタンを押せなくする } $(".num" + number).addClass("stop");//ストップの時に選択したマスの背景をピンクにする。 $("#stop").prop("disabled",true);//ストップの二度押し禁止 }); $("#reset").on("click",function(){ clearInterval(interval);//ルーレット動作を止める $("td").removeClass("count stop");//すべてのマスを白に戻す $("#start").prop("disabled",false);//スタートボタンを押せるようにする //削除した値を戻す方法が分からない。。。!!! numbers =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; $("#stop").prop("disabled",true); }); function count(){ $(".num" + number).removeClass("count");//まずは背景白 index = Math.floor(Math.random() * numbers.length);//0-15のランダムな数字をindexで取得 number = numbers[index];//配列の中から1-16の数字を変数numberで取得 $(".num" + number).addClass("count");//選択されたマスが赤色 } }); </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>
今度は配列を使わず、背景が赤色以外のマスを選択するようにといったコードを書いて同じことを実装したいと
思っているのですが、うまくいきません。
以下が配列を使わわずに同じことを実現しようとして書いたコードです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>配列使わないルーレット</title> <link rel="stylesheet" href="roulette2.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ //配列を使わない場合のルーレットは可能？？？ var number = 0; var interval_id,tr,td; for (var j = 0; j <= 12; j+=4){ tr = $("<tr>"); for (var i = 1; i <= 4; i++){ 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").prop("disabled",false);//ルーレット動作中はストップボタンを押せるようにする }); $("#stop").on("click",function(){ clearInterval(interval);//ルーレットを止める $("#start").prop("disabled",false);//スタートボタンを押せるようにする $(".num" + number).addClass("stop"); $("#stop").prop("disabled",true);//ストップの二度押し禁止 }); $("#reset").on("click",function(){ clearInterval(interval);//ルーレットを止める $("td").removeClass("count stop");//すべてのマスを白に戻す $("#start").prop("disabled",false);//スタートボタンを押せるようにする $("#stop").prop("disabled",true);//リセット押している時はストップを押せない }); function count(){ $(".num" + number).removeClass("count");//最初はマスの背景白 number = 1 + Math.floor(Math.random()*16);//1-16の数字をランダムに変数numberに代入 if (!$(".num" + number).hasclass("stop")){//class名stopがなければ $(".num" + number).addClass("count");//マスの色を赤くする } } }); </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>
試したこと
以下の部分です。
function count(){ $(".num" + number).removeClass("count");//最初はマスの背景白 number = 1 + Math.floor(Math.random()*16);//1-16の数字をランダムに変数numberに代入 if (!$(".num" + number).hasclass("stop")){//class名stopがなければ $(".num" + number).addClass("count");//マスの色を赤くする }
ただ、これだと１度ストップが押されたマスも通過して、通過してから色がついてるかついてないかを判断してしまうし、そもそも上記コードを入力するとルーレット自体繰り返し処理ができなくなってしまいました。
実現するためにどのような方法が考えられるでしょうか？
回答3件
0
自己解決
以下のように解決いたしました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>配列使わないルーレット</title> <link rel="stylesheet" href="roulette2.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ var number = 0; var interval_id,tr,td; for (var j = 0; j <= 12; j+=4){ tr = $("<tr>"); for (var i = 1; i <= 4; i++){ 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").prop("disabled",false);//ルーレット動作中はストップボタンを押せるようにする }); $("#stop").on("click",function(){ clearInterval(interval);//ルーレットを止める $("#start").prop("disabled",false);//スタートボタンを押せるようにする $(".count").addClass("stop") $("#stop").prop("disabled",true);//ストップの二度押し禁止 }); $("#reset").on("click",function(){ clearInterval(interval);//ルーレットを止める $("td").removeClass("count stop");//すべてのマスを白に戻す $("#start").prop("disabled",false);//スタートボタンを押せるようにする $("#stop").prop("disabled",true);//リセット押している時はストップを押せない }); function count(){ $("td").removeClass("count");//最初はマスの背景白 number = Math.floor(Math.random()*$("td").not(".stop").length);//class名stopを持っていないtdの個数 $("td").not(".stop").eq(number).addClass("count")//tdにclass名stopがなければ、ランダムで選んだ数字に止まって赤にする。 } }); </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>
投稿2020/02/11 14:11
総合スコア9
0
とりあえずhasclass→hasClass
投稿2020/02/10 01:13
総合スコア116724
ご回答ありがとうございました！
hasClassでとりあえず動くようになりました。notを使って自己解決いたしました。
ヒントをいただきありがとうございました。
0
Jqueryオブジェクトじゃだめ？
オブジェクトは配列じゃないらしい
javascript
1 var R=$("td").not(".stop");//配列ではなくJqueryオブジェクトらしい 2 $(".num" + number).removeClass("count");//最初はマスの背景白 3 //number = 1 + Math.floor(Math.random()*R.length);//1-16の数字をランダムに変数numberに代入 4 var M=Math.floor(Math.random()*R.length); 5 number = R[M].innerText;
@ｺｰﾄﾞ間違ってる所がある
動かないのはそれかも
投稿2020/02/09 19:17
編集2020/02/09 19:28
総合スコア120
ご回答ありがとうございます！
hasClassのところ、hasclassになっていましたね…。
自己解決しまして、そちらの解決方法を掲載させていただきます。
ヒントを頂きありがとうございました！！！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。