jQueryの勉強を引き続き実施。基本的なことからということで、表示したり非表示にしたりするコードを書いてみて実装。
前回同様、もう少し動きのあるものにしたいと思い、ボタンをクリックした時に表示・非表示できるようなものに仕上げたので備忘録。
今回は、クイズとか問題一覧でヒントや答えを表示・非表示する想定で作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrapを使用しています。
★応用していくときの流れ
STEP1. ページを開いたときに問題のヒントと答えを表示する。
↓
STEP2. ボタンをクリックしたときに、問題のヒントと答えを表示・非表示する。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル問題とヒント、答えを表示する部分を作ります。
そして、ヒントと答えを表示する箇所に対して、idを指定します。
今回は問題1のヒント「ヒント：男性です。」に「hint1」、問題1の答え「A1. 松尾芭蕉」に「answer1」を指定しています。
以下、htmlファイルの中身です。↓
※文字の前に使用しているアイコンについては、BootstrapのComponents＞Glyphiconsを参照してください。
・・・・・省略・・・・・ <body> ・・・・・省略・・・・・ <p style="font-size:20px;">Q1.「おくのほそ道」の作者は？</p> <p id="hint1" style="color:red;display:none;"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> ヒント：男性です。</p> ・・・・・省略・・・・・ <p id="answer1" style="font-size:20px;display:none;">A1. 松尾芭蕉</p>
ここまでだと、以下の画像みたいになっていると思います。↓
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. jQueryでページを開いたときに問題のヒントと答えを表示してみる
まずはjQueryでページを開いたときに問題のヒントと答えを表示してみます。表示するため『.show()』メソッドを使用します。
以下の内容を「sample.js」に記述します。
$(function(){
$('#hint1').show();
$('#answer1').show();
});
どうですか？
きちんと書けていたら、以下の画像みたいに問題のヒントと答えが表示されます。
htmlファイルにヒントと答えは記述しつつ「display:none;」で表示されないようにしていますが、最後にjQueryを読み込んでいるのでヒントと答えが表示されるようになっています。
※ページを開いたときにヒントと答えが表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. htmlファイルにボタンを追加する
問題のヒントと答えがjQueryで表示できるようになったら、
次は「jQueryでボタンをクリックしたときに、問題のヒントと答えを表示・非表示する」をしてみます。
今回は「ヒント」ボタンをクリックしたらヒントの内容を表示、「表示」ボタンをクリックしたら答えを表示、「非表示」ボタンをクリックしたらヒントと答えを非表示にします。
まずは、htmlファイル内にボタンを追加します。以下を答えのpタグ下に記述します。
以下、htmlファイルの中身です。↓
<p id="answer1" style="font-size:20px;display:none;">A1. 松尾芭蕉</p> ・・・・・省略・・・・・ <button id="h_y1" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> ヒント </button> <button id="a_y1" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 表示 </button> <button id="a_n1" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span> 非表示 </button>
STEP2-2. jQueryでボタンがクリックされたときに問題のヒントと答えを表示・非表示する
続いてボタンに動きをつけていきます。
「ヒント」ボタンと「表示」ボタン、「非表示」ボタンは『クリック』されたときに動きをするので、『.click()』メソッドを使用します。また、動きのポイントとなるボタンにはそれぞれidを指定します。
今回は「ヒント」ボタンには「a_h1」、「表示」ボタンには「a_y1」、「非表示」ボタンには「a_n1」というidを指定します。そして、「指定したボタン（id）がクリックされたときに、指定したpタグ内（id）の内容を表示する」ようにします。
それではヒント(id=hint1)の表示を「ヒント」ボタン(id=a_h1)をクリックしたときに表示する動作にします。
以下、jsファイルの中身です。↓
//ヒントを表示する。
$('#a_h1').click(function(){
$('#hint1').show();
});
続いて、答え(id=answer1)の表示を「表示」ボタン(id=a_y1)をクリックしたときに表示する動作にします。
以下、ヒントを表示する下に記述してください。
//答えを表示する
$('#a_y1').click(function(){
$('#answer1').show();
});
最後に、ヒントと答えの非表示(id=answer1)を「非表示」ボタン(id=a_n1)をクリックしたとき非表示にするようにします。
非表示にしたいので、『.hide()』メソッドを使用します。
以下、答えを表示する下に記述してください。
//ヒントと答えを非表示にする
$('#a_n1').click(function(){
$('#hint1,#answer1').hide();
});
どうですか？以下の画像みたいになっていますか？
きちんと書けていたら、「ヒント」ボタンをクリックするとヒントが表示、「表示」ボタンをクリックすると答えが表示、「非表示」ボタンをクリックするとヒントと答えが非表示になるはずです。
※ボタンをクリックしたとき表示・非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
