Q&A
$('#message') の対象となる HTML がないので補足をお願いします。
また、$("#message").html() の引数は文字列なので .text() であるべきだと思います。
JavaScript(jQuery),HTML,CSSで３桁の数当てゲーム(Hit&Blow)を作成したいと考えております。
まず、プレイヤーが決めた３桁数字を順番に入力させ、入力された数字を順番に表示し、３桁の値を保存するところまでを実装したいと考えていますが、
1桁目の数字入力、表示まではできたのですが、2桁目以降の表示や、一度入力した数字の再利用不可化が実現できておらず（考え方だけでも結構ですので）ご教示いただきたい次第です。
よろしくお願いいたします。
###実現したいこと
1)0〜9までの数字をひとつクリックさせる。(tableで入力欄作成）
１桁目（百の位）にクリックした数字を表示する。
一度クリックした数字は以降クリック不可にし、背景色をグレー色にする。
2)1)でクリックした以外の数値をクリックさせる。
２桁目（十の位）のにクリックした数字を表示する。
一度クリックした数字は同上
3)1),2)でクリックした以外の数値をクリックさせる。
3桁目（一の位）のにクリックした数字を表示する。
一度クリックした数字は同上
4)3桁入力後「OK」ボタンを押下後に、3桁の数字を保存（記憶）する。
※途中で「Del」ボタンを押下した場合は直近入力した数値を削除して、再入力可能状態とする。
###作成中のコード
lang
1 <!--メッセージ部分--> 2 <div id="message">3桁の設定ナンバーを決定してください 3 </div> 4 5 <!--ユーザのカード。設定した数字３桁を表示する--> 6 <div id="youcard"> 7 <ul id="youcards"> 8 <li id="youNum1"></li> 9 <li id="youNum2"></li> 10 <li id="youNum3"></li> 11 </ul> 12 </div> 13 14 <!--数値入力用キーボード--> 15 <div id="inputnumber"> 16 <table id="inputtable"> 17 <tbody> 18 <tr> 19 <td id="1" class="onNum">1</td> 20 <td id="2" class="onNum">2</td> 21 <td id="3" class="onNum">3</td> 22 </tr> 23 <tr> 24 <td id="4" class="onNum">4</td> 25 <td id="5" class="onNum">5</td> 26 <td id="6" class="onNum">6</td> 27 </tr> 28 <tr> 29 <td id="7" class="onNum">7</td> 30 <td id="8" class="onNum">8</td> 31 <td id="9" class="onNum">9</td> 32 </tr> 33 <tr> 34 <td id="del">Del</td> 35 <td id="0" class="onNum"> 0 </td> 36 <td id="ok">OK</td> 37 </tr> 38 </tbody> 39 </table> 40 </div> 41
lang
1//3桁の数字を設定する 2$(".onNum").on("click",function(){ 3 $("#youNum1").html(this.id); 4 $(this).css("background","#919191"); 5});
###修正したコード
lang
1 var youNums = []; //プレイヤーが設定した3桁数字の変数（配列） 2 var progress; //進行管理用の変数 3 //console.log(progress, youNums); 4 5 $(".onNum").on("click", function () { //数字0〜9をクリックした時 6 if (progress == undefined) { //変数progressがundefinedの場合 7 $("#youNum1").html(this.id); //youNum1にクリックした数字を表示 8 $(this).css("background", "#919191"); //クリックした数字をグレー色に変更 9 progress = 1; //変数progressに1を代入 10 youNums[0] = $("#youNum1").html(); 11 //console.log(progress, youNums); 12 13 } else if (progress == 1) { //変数progressが1場合 14 if (equal_youNum(this.id) == true) return; //利用済みの数字の場合処理を中断 15 $("#youNum2").html(this.id); 16 $(this).css("background", "#919191"); 17 progress = 2; 18 youNums[1] = $("#youNum2").html(); 19 //console.log(progress, youNums); 20 21 } else if (progress == 2) { 22 if (equal_youNum(this.id) == true) return; 23 $("#youNum3").html(this.id); 24 $(this).css("background", "#919191"); 25 $("#ok").css("background", "#da5758"); //OKボタンを赤色を変更 26 progress = 3; 27 youNums[2] = $("#youNum3").html(); 28 //console.log(progress, youNums); 29 30 } else { 31 } 32 }); 33 34 function equal_youNum(val) { //onNum1,onNum2の数字利用済み判定 35 if (val == $("#youNum1").html()) { //youNum1の数字と入力した数字がと一致するかのチェック 36 return true; //一致した場合true 37 } else if (val == $("#youNum2").html()) { //youNum2の数字と入力した数字がと一致するかのチェック 38 return true; //一致した場合true 39 } else { 40 return false; //いずれも一致しない場合false 41 } 42 } 43 44 $("#del").on("click", function () { //DELをクリックしたとき 45 if (progress == 3) { //進行管理が3の場合 46 $("#youNum3").empty(); //3桁目に表示していた数字を削除 47 $("#" + youNums[2]).css("background", "#fff"); //削除した数字の入力ボタンを白色に戻す 48 progress = 2; //変更管理を2に変更 49 youNums.splice(2); //プレイヤー設定番号の変数（配列）を削除 50 //console.log(progress, youNums); 51 52 } else if (progress == 2) { 53 $("#youNum2").empty(); 54 $("#" + youNums[1]).css("background", "#fff"); 55 progress = 1; 56 youNums.splice(1); 57 //console.log(progress, youNums); 58 59 } else if (progress == 1) { 60 $("#youNum1").empty(); 61 $("#" + youNums[0]).css("background", "#fff"); 62 progress = undefined; 63 youNums.splice(0); 64 //console.log(progress, youNums); 65 66 } else { 67 68 } 69 }); 70 71 $("#ok").on("click", function () { //OKをクリックしたとき 72 if (progress == 3) { //変数progressが3の場合 73 //youNums = [$("#youNum1").html(), $("#youNum2").html(), $("#youNum3").html()]; 74 $("#message").text(youNums[0] + " " + youNums[1] + " " + youNums[2] + " を設定しました"); 75 progress = 10; 76 } else { //変数progressが3以外の場合 77 } 78 //console.log(progress, youNums); 79 });
こちらもありがとうございます。
htmlの追記と、.text()への修正を行いました。
当該箇所も動作していて間違いに気が付かず進んでいたので、指摘いただけると非常に助かります。
そもそも何が正しいか分かっていなかったため勉強になりました。
回答3件
0
下記ポイントを踏まえてコードを書きました。
- イベントバブリングを利用し、
event.targetで対象ノード別の分岐処理する - aria-selected で選択状態を管理する
- テキストノードの
dataプロパティで文字列を得る
jsfiddle にコードをUPしましたので参考にしてみて下さい。
HTML
1<style> 2table { 3 border-collapse: separate; 4 border-spacing: 0.2em; 5} 6 7td { 8 border: solid 1px black; 9 width: 3em; 10 text-align: center; 11} 12 13.onNum[aria-selected=true] { 14 background-color: gray; 15} 16</style> 17<script src="jquery-2.1.4.js"></script> 18</head> 19<body> 20 21<!--ユーザのカード。設定した数字３桁を表示する--> 22<div id="youcard"> 23 <p>ユーザのカード</p> 24 <ul id="youcards"> 25 <li id="youNum1" class="youNum" aria-selected="false"></li><!-- aria-selected="false" で未選択状態とする --> 26 <li id="youNum2" class="youNum" aria-selected="false"></li> 27 <li id="youNum3" class="youNum" aria-selected="false"></li> 28 </ul> 29</div> 30 31<!--数値入力用キーボード--> 32<div id="inputnumber"> 33 <table id="inputtable"> 34 <caption>数値入力用キーボード</caption> 35 <tbody> 36 <tr> 37 <td class="onNum" aria-selected="false">1</td> 38 <!-- 39 id="1" は HTML の文法違反(id は数字から始まってはいけない)。 40 テキストノードからも値を取れる事から id を削除。 41 aria-selected で選択状態を管理する。 42 --> 43 <td class="onNum" aria-selected="false">2</td> 44 <td class="onNum" aria-selected="false">3</td> 45 </tr> 46 <tr> 47 <td class="onNum" aria-selected="false">4</td> 48 <td class="onNum" aria-selected="false">5</td> 49 <td class="onNum" aria-selected="false">6</td> 50 </tr> 51 <tr> 52 <td class="onNum" aria-selected="false">7</td> 53 <td class="onNum" aria-selected="false">8</td> 54 <td class="onNum" aria-selected="false">9</td> 55 </tr> 56 <tr> 57 <td id="bs">BS</td><!-- BackSpace と同様の機能なので名称変更 --> 58 <td class="onNum" aria-selected="false">0</td><!-- width でレイアウトした為、" " を削除。 --> 59 <td id="ok">OK</td> 60 </tr> 61 </tbody> 62 </table> 63</div> 64 65<script> 66'use strict'; 67(function (jQuery) { 68 function unselectLastSelectedNumber (jli, lastNumber) { // 最後に選択した数値セルを未選択にする 69 for (var i = 0, l = jli.length, li; i < l; ++i) { 70 li = jli[i]; 71 if (li.firstChild.data === lastNumber) { // 最後に選択した数値と一致するなら 72 jQuery(li).attr('aria-selected', 'false'); 73 break; 74 } 75 } 76 } 77 78 function handleClick (event) { 79 var td = event.target, // td 要素ノード 80 id = td.id, // td 要素ノードの id 属性値 81 jQuery = event.view.jQuery, // jQuery オブジェクト 82 jtd = jQuery(td), // td 要素ノード (jQuery オブジェクト) 83 jli; 84 85 if (jtd.is('.onNum[aria-selected=false]')) { // 対象が数字かつ選択状態(aria-selected=true)でないなら 86 jli = jQuery('.youNum[aria-selected=false]'); // 未選択状態のユーザのカードを得る 87 88 if (jli.length) { // 実選択状態のユーザのカード数が 0 でないなら 89 jQuery(jli[0]).text(td.firstChild.data).attr('aria-selected', 'true'); // ユーザのカードを選択状態にし、数値を入れる 90 jtd.attr('aria-selected', 'true'); // 数値選択領域を選択状態にする 91 } 92 } else if (id === 'bs') { // BS ボタンなら 93 jli = jQuery('.youNum[aria-selected=true]'); // 選択状態のユーザのカードを得る 94 95 if (jli.length) { // 選択状態のユーザのカード数が 0 でないなら 96 jli = jQuery(jli[jli.length - 1]); // 最後に選択したユーザのカードを得る 97 unselectLastSelectedNumber (jQuery('.onNum[aria-selected=true]', td.parentNode.parentNode), jli.text()); // 最後に選択した数値セルを未選択にする 98 jli.attr('aria-selected', 'false').empty(); // 最後に選択したユーザのカードを未選択にし、数値を削除する 99 } 100 } else if (id === 'ok') { 101 console.log('save'); // 保存処理 (3桁の数字を保存する。具体的な保存処理が不明だったので省略。.youNum から必要な領域に保存する。) 102 } 103 } 104 105 jQuery('#inputtable').on('click', 'td', handleClick); // .on() の第2引数で event.target が td 要素ノードであることを保証する 106}(jQuery)); 107</script>
投稿2015/09/23 05:02
総合スコア18164
詳細なご回答、ご説明ありがとうございました。
用語自体もわからない点が多々あるため、調べながら参考にさせていただきます。
> Edit fiddle - JSFiddle
サンプルありがとうございます。非常に助かります。
JSFiddleも初めてしりました。
文法違反やその他の不備箇所のご指摘もありがとうございます。
現状期待する動作が実現するだけでも精一杯ですが、頂いた内容を参考に進めていきたいと思います。
0
基本的な実装方法を個別に解説してみます。
1)0〜9までの数字をひとつクリックさせる。(tableで入力欄作成）
一度クリックした数字をクリックできないようにするには、
onClickイベント内で振り分け処理するのが良いと思います。
流れとしては、
- CSSで、disableクラスを用意する。.disable {background:#919191";}
- クリックされた要素をhasClassでチェックして、disableクラスが適用されているか確認
- 番号リストIIがfalseの場合は#youNum(x)に数値を入れ、対象の要素にdisableクラスを適用させる。trueなら処理を行わない。
※対象の要素の取得に関しては次の項で説明します。
2)1)でクリックした以外の数値をクリックさせる。
3)1),2)でクリックした以外の数値をクリックさせる。
どの#youNum(n)に数値を入れるか判定するには、
専用の関数を作成すればよいと思います。
例えば、以下の様な関数です。
名前 ：getCurrentNumNode
引数 ：なし
戻り値：#youNum1～#youNum3の中から、一番上の位かつ空の要素
とすれば、1)のonClickの処理の中からgetCurrentNumNodeを呼べば
1つの処理で全ての数字に対応するようになります。
4)3桁入力後「OK」ボタンを押下後に、3桁の数字を保存（記憶）する。
「OK」ボタンの処理もonClickイベントで対応できます。
保存させる方法については、web strageを利用すると良いと思います。
詳細については「vweb strage」でググれば、色々出てきます。
※途中で「Del」ボタンを押下した場合は直近入力した数値を削除して、再入力可能状態とする。
「Del」ボタンの処理は2,3のgetCurrentNodeの応用で大丈夫かと思います。
投稿2015/09/23 02:21
総合スコア10
0
ベストアンサー
勉強のためにやってると思いますので、
躓いている箇所のみ回答いたします。
・3桁を入力させるためには？
→進行管理用の変数を持たせて、ボタンを押したタイミングで次に移行できるようにする。
var progress; // 進行管理用の変数 $(".onNum").on("click",function(){ if(progress == undefined) { // 進行状況によって条件分岐 $("#youNum1").html(this.id); progress = 1; } else if(progress == 1) { $("#youNum2").html(this.id); progress = 2; } $(this).css("background","#919191"); });
上記で2桁目まで入るようになるので、同様なやり方で3桁目まで入るように修正してみてください。
・再利用不可を実現する。
→チェック処理を入れて、NGなら処理をしないようにする。
$(".onNum").on("click",function(){ if(progress == undefined) { $("#youNum1").html(this.id); progress = 1; } else if(progress == 1) { if(equal_youNum1(this.id) == true) return; // 既に使用されている場合は、処理を中断 $("#youNum2").html(this.id); progress = 2; } $(this).css("background","#919191"); });
↓equal_youNum1の判定処理
function equal_youNum1(val) { if(val == $("#youNum1").html()) { return true; } else { return false; } }
こちらも、2桁目のチェックのみなので、3桁目の（1桁目と2桁目で使用されていないか）チェックを実装してみてください。
投稿2015/09/22 19:48
総合スコア1124
早急なご回答ありがとうございます！
教えて頂いた内容をもとに「修正したコード」で実装してみました。
冗長な部分も多々あると思いますが、数字３桁を入力する部分まで動かすことができました！！
まだまだ完全に理解できていない点がありますが、完成に向けて進めていきたいと思います。
実装内容に問題などある場合はご指摘いただけますと幸いです。
あなたの回答
tips
プレビュー
