今回は、jQueryで指定した要素の取得を実装。
使っているメソッドは・・・
・ 子孫の要素まで探してくる『.find()』
・ クリックした時に処理をする『.click()』
・ クラスを削除する『.removeClass()』
以上３つを使ってます。指定したclassを取得して、ボタンをクリックした時に取得したclassを削除するものに仕上げたので備忘録。
クイズ系サイトを作るときの答えを隠す・表示する動作をイメージで作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.取得したclassに対して、クリックした時にclassを削除する。
STEP1-1. 要素を画面に作成する
tableタグで3×3の表を作成し、各セルにラベル・問題文・答え記入欄を表示させます。
ここでのポイントは網掛けにしたい箇所をspanで囲んでclassを指定することです。
次の画像はspanで囲んでclass指定している記述例です。
それでは見た目の調整をいれたcssも含め、htmlファイルに記述します。
以下、htmlファイルの中身です。↓
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
font-size: 18px;
}
table{
margin: 35px 0 20px 20px;
}
td{
height: 40px;
letter-spacing: 0.3em
}
.lab{
font-weight: bold;
}
.an{
background: #D50000;
}
span{
color: #D50000;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<table>
<tr>
<td class="lab">問題１:</td><td> 夏目漱石の作品「<span class="an">吾輩</span>は猫である」 </td><td><input type="text"></td>
</tr>
<tr>
<td class="lab">問題２:</td><td> 太宰治の作品「人間<span class="an">失格</span>」 </td><td><input type="text"></td>
</tr>
<tr>
<td class="lab">問題３:</td><td> 宮沢賢治の作品「銀河<span class="an">鉄道</span>の夜」 </td><td><input type="text"></td>
</tr>
</table>
<div style="margin-left: 20px;"><button class="btn">回答を表示</button></div>
</div>
ここまでだと、次の画像のように表示されている状態になっていると思います。↓
画面が作成できたら、続いてjQueryを記述するjsファイルを作っていきます。
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. 取得したclassに対して、クリックした時にclassを削除する
jQueryで要素として探して取得したclassに対して、クリックした時にclassを削除する動作をさせていきます。
ここで『.find()』メソッド、『.click()』メソッド、『.removeClass()』メソッドを組み合わせて使います。
※『.click()』メソッドについては、過去記事「$(this)を使いつつ、jQueryでクリックした時に画像を変更する」も参考にしてみてください。
※『.removeClass()』メソッドについては、過去記事「jQueryでクラスを追加・削除する」も参考にしてみてください。
動作の流れは、
１. 『.find()』メソッドで要素（class）を探してくる。
２. 探してきた要素（class）に対して『.click()』メソッドでクリックした時という動作を指定し、
３. ボタンをクリックした時に、『.removeClass()』メソッドで要素（class）を削除する。
といった感じです。
上記に合った動作をさせるためにさっそく、以下の内容を「sample.js」に記述します。
//クリックした時にクラスを削除
$(function(){
$('table').find('.an');
$('.btn').click(function(){
$('.an').removeClass();
})
});
どうですか？
次の画像みたいにボタンをクリックした時に要素（class）が消えていたらOKです。
※要素（class）が消えない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓
デモサイト
