質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4058閲覧

jQuery 神経衰弱を作ったものの動かない

ysmd

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/01/23 05:52

編集2018/01/23 06:30

###発生している問題・エラーメッセージ
jQueryで神経衰弱を作ってみたものの動作しません。

動作の流れとしては以下の通りです。
① 16枚のカードの中から「?」と書かれたものをひとつクリック
② そのカードに書かれている「?」が「1」などの数字に変わる
③ もうひとつ「?」と書かれたものをクリックする
④ その要素に書かれている「?」が「1」などの数字に変わる
⑤ ②と④で表示された数字が一致している場合は、開いた数字はそのままで①に戻る。一致していない場合は1秒後に数字が「?」に戻り①にもどる。
⑥: 全ての要素が開かれたときにアラートで「Game Over」

ですが、現状は
カードをクリックしても「?」が数字に切り替わらず、2枚のカードをクリックすると途中クリック無効のコードが働き全てのカードがクリックできなくなってしまい先に進めません。

以下のサイトを参考に書いてみたのですが動作しません。
https://magnets.jp/web_design/6308/#midashi1

###該当のソースコード

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<title></title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/base.css"> 10<link rel="stylesheet" href="css/style.css"> 11</head> 12<body> 13<ul class="lists clearfix"></ul> 14<script type="text/javascript" src="js/jquery.js"></script> 15<script type="text/javascript"> 16//jquery 17</script> 18</body> 19</html>

css

1.lists { 2 border: 10px #CCC solid; 3} 4.lists > li { 5 float: left; 6 width: 25%; 7 background-color: #EEE; 8 border-top: 2px #CCC solid; 9 border-right: 2px #CCC solid; 10 font-size: 20px; 11 font-weight: bold; 12 line-height: 75px; 13 text-align: center; 14 cursor: pointer; 15 -webkit-box-sizing: border-box; 16 box-sizing: border-box; 17} 18.lists > li:nth-child(-n + 4) { 19 border-top: none; 20} 21.lists > li:nth-child(4n) { 22 border-right: none; 23}

javascript

1$(function(){ 2 var $ul = $(".lists"), 3 totalCard = 16, //カード枚数 4 cardNum = [], //カード配列 5 returnSec = 1000, //めくったカードが戻る秒数 6 index, //クリックしたカードの並び順 7 first = true, //クリックしたカードが1枚目かどうかの判定 8 card1, //1枚目に引いたカードの番号 9 card2, //2枚目に引いたカードの番号 10 pair = 0; //正解したカードのペア数 11 12 //カード番号を配列に格納 13 for (var i = 1; i <= totalCard/2; i++){ 14 cardNum.push(i,i); 15 } 16 //配列の中身をランダムに並び替える 17 cardNum.sort(function(){ 18 return Math.random() - Math.random(); 19 }); 20 //カードを追加 21 var listItems = cardNum.map(function(num){ 22 return "<li data-num='" + num + "'>?</li>"; 23 }); 24 $ul.append(listItems); 25 26 // カードを開く 27 function open(){ 28 $('li').click(function(){ 29 $(this).text($(this).data('num')); 30 }); 31 } 32 // カードを閉じる 33 function cardClose(){ 34 setTimeout(function(){ 35 $('li').text('?'); 36 },returnSec); 37 } 38 //カードをクリックさせない 39 function cardLock(){ 40 $('.lists li:eq('+index+')').css('pointer-events','none'); 41 } 42 //すべてのカードをロック 43 function allLock(){ 44 $('.lists li').css('pointer-events','none'); 45 } 46 //全てのカードをアンロック 47 function unLock(){ 48 $('.lists li').css('',''); 49 } 50 $('.lists li').click(function(){ 51 index = $('.lists li').index(this); 52 cardLock(); 53 cardClose(index,open); 54 if(first == true){ 55 index1 = index; 56 card1 = cardNum[index]; 57 first = false; 58 } else { 59 allLock(); 60 card2 = cardNum[index]; 61 comparison(); 62 } 63 }); 64 //選んだカード2枚の正否判定 65 function comparison(){ 66 if(card1 == card2){ //同じカードだったら 67 $('.lists li:eq('+index+')').css('pointer-events','none'); 68 $('.lists li:eq('+index1+')').css('pointer-events','none'); 69 pair++; 70 if(pair == totalCard/2){ 71 setTimeout(function(){ 72 alert('Game Over') 73 },returnSec); 74 } 75 } else { //違うカードだったら 76 setTimeout(function(){ 77 cardClose(index,close); 78 cardClose(index1,close); 79 },returnSec); 80 } 81 first = true; 82 card2 = 0; 83 setTimeout(function(){ 84 unLock(); 85 }, returnSec); 86 } 87});

###補足情報(言語/FW/ツール等のバージョンなど)
参考にしたものをほぼ写経して、不要なもの(imgなど使わないもの)は省いて書いたのですが、
動作しない原因が分からない状況のためアドバイスをいただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/01/23 06:06

エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を具体的に記述されたほうが回答を得られやすいと思います。
ysmd

2018/01/23 06:35

ご指摘ありがとうございます。伝わりやすいように追記しました。コンソール上にはエラーは出ていませんでした。
guest

回答2

0

ベストアンサー

ソースコードを拝見しましたが、大分、参考にされたソース?とは違うようです。

関数定義とイベント登録と実際の処理とがごちゃ混ぜになっているので、非常にわかりづらくなってしまっています。

要は大まかな処理の流れとしては、以下であれば言い訳です。

  1. カード部分の作成
  2. カードをクリックされた時のイベントを登録
    2-1. クリックされたカードを表にする
    2-2. カードを比較

以下に参考としてソースを書いておきます。

javascript

1 2function open($card){ 3 $card.css('pointer-events','none') 4 .text($card.data('num')); 5 6} 7 8function close($card){ 9 $card.css('pointer-events','') 10 .text('?'); 11} 12 13 14function compare($card){ 15 // 1枚目に開いたカードが存在するか確認 16 // 存在すれば、即ち、現在は2枚目のカードを開いたところ 17 if($('.firstOpen').length == 0){ 18 // 開いたカードが一枚目のカードであれば、 19 // この要素が1枚目であることがわかるようにするため、 20 // firstOpenのクラスを付与しておく 21 $card.addClass('firstOpen'); 22 } else { 23 24 // 1枚目のカードのjQueryオブジェクト 25 let $firstCard = $('.firstOpen'); 26 // 2枚目のカードのjQueryオブジェクト 27 let $secondCard = $card; 28 29 // 1枚目のカードの数字 30 let firstNum = $firstCard.data('num'); 31 // 2枚目のカードの数字 32 let secondNum = $secondCard.data('num'); 33 34 // 1枚目識別用のクラスを削除 35 $firstCard.removeClass('firstOpen'); 36 37 // 一致している場合、両方からunopenedを削除する 38 // その後、unopenedが付与された要素の数を確認し、 39 // 0個であれば、アラートを表示する 40 if(firstNum === secondNum){ 41 $firstCard.removeClass('unopened'); 42 $secondCard.removeClass('unopened'); 43 44 if($('.unopened').length ===0){ 45 alert("Game Over"); 46 } 47 48 // 一致していない場合、二枚とも閉じる 49 } else { 50 close($firstCard); 51 close($secondCard); 52 } 53 54 } 55 56} 57 58// 初期処理 59$(function(){ 60 61 let cardNum = []; 62 let totalCard = 16; 63 64 // カードの中身を作成 65 for (var i = 1; i <= totalCard/2; i++){ 66 cardNum.push(i,i); 67 } 68 69 // ランダムに並べ替えて 70 // li要素を作成して 71 // listに追加 72 cardNum 73 .sort(function(){ 74 return Math.random() - Math.random(); 75 }) 76 .map(function(num){ 77 return "<li class='unopened' data-num='" + num + "'>?</li>"; 78 }) 79 .forEach(function(element){ 80 $(".lists").append(element); 81 }); 82 83 // カードをクリックされた時のイベントを登録 84 $('.lists li').click(function(){ 85 // クリックされたカード(li要素)のjQueryオブジェクト 86 let $openedCard = $(this); 87 88 // カードをオープン 89 open($openedCard); 90 91 // カードを比較 92 // 1秒ほど待機させてから比較させる 93 // ※待機しないと二枚目のカードの番号が表示されるとほぼ同時ぐらいに比較が終わり 94 // 二枚目のカードの数字がわかりにくいため 95 setTimeout(function(){compare($openedCard);}, 1000); 96 97 }); 98}); 99 100 101

投稿2018/01/23 10:00

LineOfLightning

総合スコア253

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ysmd

2018/01/23 13:12

回答ありがとうございます。 一つ一つ説明していただき助かりました。 とても勉強になります。
guest

0

open() がどこでも使われていないから1度も開かないと思います。
各関数に console.log(変数) を仕込んで、状態がどうなっているか1つずつ確認してみてはいかがでしょうか。

投稿2018/01/23 06:50

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ysmd

2018/01/23 07:51 編集

回答ありがとうございます。 openという関数化した使い方をせずに、function open(){}を外したらクリック時にちゃんと数字に変わりました。 その後の挙動はカードを1枚クリックすると「?」に戻り、開いたままを維持することができない状態です。2枚目をクリックしても同様で、2枚クリック後は全てクリックできなくなります。console.log()で確認しても決定打になる答えは見つけられませんでした。 お手すきの時にまたアドバイスをいただけないでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問