Q&A
どんな問題が起きているのかを書いてくれんかね？
jQueryを読み込み.showをいう関数を使って非表示にして文字を表示させたいのですがjQueryがうまく読み込めていないようで表示されません。
入門WEBゲーム開発という本を読みなら勉強をしているのですが、一番初めの部分でつまづいてしまいました。
内容はクイズゲームを作るというもので、CSSで非表示にした問題を表示するために、jQueryを読み込んでjavascriptで問題を表示するという部分です。以下にソースコードをあげます。
lang
1<!DOCTYPE html> 2<html lang = "ja"> 3 <head> 4 <meta charset = "utf-8"> 5 <title>クイズ</title> 6 <link rel = "stylesheet" type = "text/css" href = "main.css"> 7 </head> 8 <body> 9 <h1>クイズ</h1> 10 <div id = "quiz"> 11 <div id="question1"> 12 <div class="question">Webサイトの作成に使用される主要なファイルタイプでないのは？</div> 13 <input type="radio" name="question1" value="a"/> 14 <label>.html</label> 15 <input type="radio" name="question1" value="b"/> 16 <label>.exe</label> 17 <input type="radio" name="question1" value="c"/> 18 <label>.js</label> 19 <input type="radio" name="question1" value="d"/> 20 <label>.css</label> 21 </div> 22 <br /> 23 <div id="question2"> 24 <div class="question">JavaScriptのオブジェクトを包む文字は？</div> 25 <input type="radio" name="question2" value="a"/> 26 <label>[]</label> 27 <input type="radio" name="question2" value="b"/> 28 <label>;;</label> 29 <input type="radio" name="question2" value="c"/> 30 <label>{}</label> 31 <input type="radio" name="question2" value="d"/> 32 <label>()</label> 33 </div> 34 <br /> 35 <div id="question3"> 36 <div class="question">Molesとは次のうちのどれのこと？</div> 37 <input type="radio" name="question3" value="a"/> 38 <label>Omniverous</label> 39 <input type="radio" name="question3" value="b"/> 40 <label>Adorable</label> 41 <input type="radio" name="question3" value="c"/> 42 <label>Whackable</label> 43 <input type="radio" name="question3" value="d"/> 44 <label>これら全部</label> 45 </div> 46 <br /> 47 <div id="question4"> 48 <div class="question">日本語の"か"の発音は？</div> 49 <input type="radio" name="question4" value="a"/> 50 <label>ka</label> 51 <input type="radio" name="question4" value="b"/> 52 <label>ko</label> 53 <input type="radio" name="question4" value="c"/> 54 <label>ke</label> 55 <input type="radio" name="question4" value="d"/> 56 <label>ki</label> 57 </div> 58 <br /> 59 <div id="question5"> 60 <div class="question">地上の重力定数はおよそ...</div> 61 <input type="radio" name="question5" value="a"/> 62 <label>10m/s^2</label> 63 <input type="radio" name="question5" value="b"/> 64 <label>.809m/s^2</label> 65 <input type="radio" name="question5" value="c"/> 66 <label>9.81m/s^2</label> 67 <input type="radio" name="question5" value="d"/> 68 <label>84.4m/s^2</label> 69 </div> 70 <br /> 71 <div id="question6"> 72 <div class="question">10進数の45を2進数に直すと？</div> 73 <input type="radio" name="question6" value="a"/> 74 <label>101101</label> 75 <input type="radio" name="question6" value="b"/> 76 <label>110011</label> 77 <input type="radio" name="question6" value="c"/> 78 <label>011101</label> 79 <input type="radio" name="question6" value="d"/> 80 <label>101011</label> 81 </div> 82 <br /> 83 <div id="question7"> 84 <div class="question">4 << 2 = ...</div> 85 <input type="radio" name="question7" value="a"/> 86 <label>16</label> 87 <input type="radio" name="question7" value="b"/> 88 <label>4</label> 89 <input type="radio" name="question7" value="c"/> 90 <label>2</label> 91 <input type="radio" name="question7" value="d"/> 92 <label>8</label> 93 </div> 94 <br /> 95 <div id="question8"> 96 <div class="question">直角三角形の直角をはさむ２辺の長さが分かっているとき、斜辺はどうやって求められますか？</div> 97 <input type="radio" name="question8" value="a"/> 98 <label>Pi*Radius^2</label> 99 <input type="radio" name="question8" value="b"/> 100 <label>ピタゴラスの定理</label> 101 <input type="radio" name="question8" value="c"/> 102 <label>計算機？</label> 103 <input type="radio" name="question8" value="d"/> 104 <label>Sin(辺1 + 辺2)</label> 105 </div> 106 <br /> 107 <div id="question9"> 108 <div class="question">ゲームはすべて、ちゃんと実行するには最低でも毎秒60フレームが必要：本当か嘘か？</div> 109 <input type="radio" name="question9" value="a"/> 110 <label>本当</label> 111 <input type="radio" name="question9" value="b"/> 112 <label>嘘</label> 113 </div> 114 <br /> 115 <div id="question10"> 116 <div class="question">サーバーの使用は何に役立ちますか？</div> 117 <input type="radio" name="question10" value="a"/> 118 <label>コードを隠す</label> 119 <input type="radio" name="question10" value="b"/> 120 <label>高い性能を必要とするゲーム</label> 121 <input type="radio" name="question10" value="c"/> 122 <label>プレイヤーの共有体験の実現</label> 123 <input type="radio" name="question10" value="d"/> 124 <label>これら全部</label> 125 </div> 126 </div> 127 <script src = "jquery.js"></script> 128 <script src = "game.js"></script> 129 </body> 130</html>
lang
1body{ 2 margin-left:50px; 3} 4#question1, #question2, #question3, #question4, #question5, 5#question6, #question7, #question8, #question9, #question10{ 6 display:none; 7}
ここが問題のjQueryを読み込んでいるファイルです。書籍には
https://developers.google.com/speed/libraries/#jquery
上記のURLの1.x のパスをコピーして、jquery.jsという名前で保存しろとあったので、ファイルを作成しました
lang
1<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
クイズの一文目を表示するjavascriptです.
lang
1if(jQuery){ 2 $("#question1").show(); 3};
何が間違っているのか自分では見つけることができませんでした。根本的にやり方が間違っていたりするのでしょうか？
question1の問題が画面に表示されないです。ご指摘ありがとうございます追記しておきます
となると、階層がどうこうとか、jQuery のダウンロードとかは何？ただのノイズになっている気がするんですか？
そうですね、修正します。幼稚な文章ですみません、ご指摘ありがとうございます
回答2件
0
ベストアンサー
現状、jquery.jsの内容が以下のようになっているという事でしょうか。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
それでしたら、そこが間違いです。
下記のリンクを右クリックして、「名前を付けてリンク先を保存」で jquery.js という名前で保存すると、正しいjquery.jsを入手できます。
ご参考になれば。
投稿2018/06/30 16:03
総合スコア2425
このリンクはどのサイトで見ることができるのでしょうか？
https://developers.google.com/speed/libraries/#jquery
このURLの中からではアクセスすることはできませんか
ご質問の意味が解りませんが、リンク先は http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js です。
0
html
1<!DOCTYPE html> 2<html lang = "ja"> 3 <head> 4 <meta charset = "utf-8"> 5 <title>クイズ</title> 6 <style type="text/css"> 7 body{ 8 margin-left:50px; 9 } 10 .question-list { 11 display:none; 12 } 13 </style> 14 </head> 15 <body> 16 <h1>クイズ</h1> 17 <div id = "quiz"> 18 <div class="question-list"> 19 <div class="question">Webサイトの作成に使用される主要なファイルタイプでないのは？</div> 20 <input type="radio" name="question1" value="a"/> 21 <label>.html</label> 22 <input type="radio" name="question1" value="b"/> 23 <label>.exe</label> 24 <input type="radio" name="question1" value="c"/> 25 <label>.js</label> 26 <input type="radio" name="question1" value="d"/> 27 <label>.css</label> 28 </div> 29 <br /> 30 <div class="question-list"> 31 <div class="question">JavaScriptのオブジェクトを包む文字は？</div> 32 <input type="radio" name="question2" value="a"/> 33 <label>[]</label> 34 <input type="radio" name="question2" value="b"/> 35 <label>;;</label> 36 <input type="radio" name="question2" value="c"/> 37 <label>{}</label> 38 <input type="radio" name="question2" value="d"/> 39 <label>()</label> 40 </div> 41 <br /> 42 <div class="question-list"> 43 <div class="question">Molesとは次のうちのどれのこと？</div> 44 <input type="radio" name="question3" value="a"/> 45 <label>Omniverous</label> 46 <input type="radio" name="question3" value="b"/> 47 <label>Adorable</label> 48 <input type="radio" name="question3" value="c"/> 49 <label>Whackable</label> 50 <input type="radio" name="question3" value="d"/> 51 <label>これら全部</label> 52 </div> 53 <br /> 54 <div class="question-list"> 55 <div class="question">日本語の"か"の発音は？</div> 56 <input type="radio" name="question4" value="a"/> 57 <label>ka</label> 58 <input type="radio" name="question4" value="b"/> 59 <label>ko</label> 60 <input type="radio" name="question4" value="c"/> 61 <label>ke</label> 62 <input type="radio" name="question4" value="d"/> 63 <label>ki</label> 64 </div> 65 <br /> 66 <div class="question-list"> 67 <div class="question">地上の重力定数はおよそ...</div> 68 <input type="radio" name="question5" value="a"/> 69 <label>10m/s^2</label> 70 <input type="radio" name="question5" value="b"/> 71 <label>.809m/s^2</label> 72 <input type="radio" name="question5" value="c"/> 73 <label>9.81m/s^2</label> 74 <input type="radio" name="question5" value="d"/> 75 <label>84.4m/s^2</label> 76 </div> 77 <br /> 78 <div class="question-list"> 79 <div class="question">10進数の45を2進数に直すと？</div> 80 <input type="radio" name="question6" value="a"/> 81 <label>101101</label> 82 <input type="radio" name="question6" value="b"/> 83 <label>110011</label> 84 <input type="radio" name="question6" value="c"/> 85 <label>011101</label> 86 <input type="radio" name="question6" value="d"/> 87 <label>101011</label> 88 </div> 89 <br /> 90 <div class="question-list"> 91 <div class="question">4 << 2 = ...</div> 92 <input type="radio" name="question7" value="a"/> 93 <label>16</label> 94 <input type="radio" name="question7" value="b"/> 95 <label>4</label> 96 <input type="radio" name="question7" value="c"/> 97 <label>2</label> 98 <input type="radio" name="question7" value="d"/> 99 <label>8</label> 100 </div> 101 <br /> 102 <div class="question-list"> 103 <div class="question">直角三角形の直角をはさむ２辺の長さが分かっているとき、斜辺はどうやって求められますか？</div> 104 <input type="radio" name="question8" value="a"/> 105 <label>Pi*Radius^2</label> 106 <input type="radio" name="question8" value="b"/> 107 <label>ピタゴラスの定理</label> 108 <input type="radio" name="question8" value="c"/> 109 <label>計算機？</label> 110 <input type="radio" name="question8" value="d"/> 111 <label>Sin(辺1 + 辺2)</label> 112 </div> 113 <br /> 114 <div class="question-list"> 115 <div class="question">ゲームはすべて、ちゃんと実行するには最低でも毎秒60フレームが必要：本当か嘘か？</div> 116 <input type="radio" name="question9" value="a"/> 117 <label>本当</label> 118 <input type="radio" name="question9" value="b"/> 119 <label>嘘</label> 120 </div> 121 <br /> 122 <div class="question-list"> 123 <div class="question">サーバーの使用は何に役立ちますか？</div> 124 <input type="radio" name="question10" value="a"/> 125 <label>コードを隠す</label> 126 <input type="radio" name="question10" value="b"/> 127 <label>高い性能を必要とするゲーム</label> 128 <input type="radio" name="question10" value="c"/> 129 <label>プレイヤーの共有体験の実現</label> 130 <input type="radio" name="question10" value="d"/> 131 <label>これら全部</label> 132 </div> 133 </div> 134 <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 135 <script> 136 $(function () { 137 $('.question-list:first').show(); 138 }); 139 </script> 140 </body> 141</html>
投稿2018/06/30 16:01
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
