今回は「$(this)」を使いつつ、jQueryでクリック時の処理「.click()」メソッドを使って画像の変更を実装。
前回まではidやclassを指定して説明してきました。が、それぞれ別々の要素に同じ動作をさせたいときにidをつけて記述するのは大変です。時々、途中で間違って手直しが大変なことがしばしばありました。そこで、便利な「$(this)」を知ったので、よく利用する「.click()」メソッドを使って、クリック時に画像を変更するものに仕上げたので備忘録。
ホームページのボタンを使っている時や簡単なカードゲームを作るときに使うイメージで作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.クリック時に画像を変更する。
STEP1-1. 要素を画面に作成する
まずは画像を表示させた画面を作成します。
複数のうち動きが同じ画像には同じclassを、一つだけ別の画像を表示させたい画像には別のclassを指定します。
このSTEPですることは、２つです。
① 変更前の画像にclassを指定する。
② 画像をdivで囲んでidを指定する。
① 変更前の画像にclassを指定する。
複数のうち動きが同じ画像には同じclassを、一つだけ別の画像を表示させたい画像には別のclassを指定します。imgタグで画像を複数表示させ、それぞれにclass指定します。
次の画像はclassを指定している例です。
② 画像をdivで囲んでidを指定する。
①の画像をdivで囲んでidを指定します。次の画像はidを指定している例です。
それではcssも含め、上記２つのポイントを含めてhtmlファイルに記述します。
以下、htmlファイルの中身です。↓
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
#area1{
text-align:center;
}
img{
margin:10px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div id="area1">
<img src="./img/jq19/card1.jpg" alt="" class="card">
<img src="./img/jq19/card1.jpg" alt="" class="card">
<img src="./img/jq19/card1.jpg" alt="" class="card">
<img src="./img/jq19/card1.jpg" alt="" class="card">
<img src="./img/jq19/card1.jpg" alt="" class="card2">
</div>
</div>
ここまでだと、次の画像のように表示されている状態になっていると思います。↓
要素（画像）を表示する画面が作成できたら、続いてjQueryを記述するファイルを作っていきます。
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()』メソッドと『.attr()』メソッドを組み合わせて使います。
※『.attr()』メソッドについては、過去記事「jQueryで属性をまとめて設定する」も参考にしてみてください。
動作の流れは、
１. ①の要素（画像）をクリックした時に、
２. 「.click()」メソッドで要素（画像）を変更する。
といった感じです。
jQueryを記述する前に、「$(this)」について少し触れます。今までは同じ処理に対してidやclassを指定していましたが、「$(this)」を使うと、一つ一つにidやclassを指定しなくてもいい場合があります。
「$(this)」はイベントが発生した要素に対して処理をします。そのため、同じ処理をしたい複数の要素がある場合は、「$(this)」を使うことで、同じclassを指定していてもイベント対象のみ処理してくれます。
「$(this)」を使うことで、同じ処理を何度も記述するよりもスッキリし、classの名前を間違えて手戻りを減りました。実際に記述しながら実感したほうが早いので・・・
さっそく、以下の内容を「sample.js」に記述します。
$(function(){
$('.card').click(function(){
$(this).attr('src','./img/jq19/card2.jpg');
});
$('.card2').click(function(){
$(this).attr('src','./img/jq19/card3.jpg');
});
});
どうですか？
次の画像みたいに画像をクリック時に画像が変化していたらOKです。
※画像が変化しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓
デモサイト
