今回は、jQueryで要素をクリックした時に色の変更を実装。使っているメソッドは・・・
・ クリックした時に処理をする『.click()』
・ 条件に一致する要素に対して繰り返し処理をする『.each()』
・ 指定したclassの追加と削除する『.toggleClass()』
以上３つを使ってます。前回から使っている便利な「$(this)」を使いつつ、tableタグで表を作成してtdタグのマス目を要素とし、クリックした時に色を変更するものに仕上げたので備忘録。
ドット絵を作るときのシンプルなマス目をイメージで作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1. クリックした時にマス目（要素）の色を変更する。
STEP1-1. 要素を画面に作成する
tableタグで10×10のマス目と番号を見出しとする表を作成します。
それでは見た目の調整をいれたcssも含め、htmlファイルに記述します。
以下、htmlファイルの中身です。↓
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
td,th{
width: 35px;
height: 35px;
text-align: center;
}
th{
background: #FBE9E7;
}
.color{background: #DD2C00;}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div>
<table border=1 align="center">
<tr><th> </th><th>１</th><th>２</th><th>３</th><th>４</th><th>５</th><th>６</th><th>７</th><th>８</th><th>９</th><th>10</th></tr>
<tr><th>１</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>２</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>３</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>４</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>５</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>６</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>７</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>８</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>９</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><th>10</th><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>
</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. クリックした時にマス目（要素）の色を変更する
jQueryでクリックした時に要素（マス目）の色を変更する動作をさせていきます。
ここで『.click()』メソッド、『.each()』メソッド、『.toggleClass()』メソッドを組み合わせて使います。
※『.click()』メソッドについては、過去記事「$(this)を使いつつ、jQueryでクリックした時に画像を変更する」も参考にしてみてください。
動作の流れは、
１. 『.click()』メソッドで「クリックした時」という条件を指定し、
２. 『.each()』メソッドで処理の繰り返しを指定しつつ、
３. 要素（マス目）をクリックした時に、『.toggleClass()』メソッドで要素（マス目）に対してclassを追加・削除をする。
といった感じです。
上記に合った動作をさせるためにさっそく、以下の内容を「sample.js」に記述します。
//クリックした時に色を変更
$(function(){
$('td').click(function(){
$(this).each(function(){
$(this).toggleClass('color');
});
});
});
どうですか？
次の画像みたいに要素（マス目）をクリック時に色が変化していたらOKです。
※色が変化しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓
デモサイト
