じゃ、この5枚に同じことをしたい
→全部こんな感じで作ったらあとあとの変更が面倒
→thisを使うと便利らしい
this
C系にもでてくるらしい。オブジェクトの
1.JAVAにおいて
classの中(内部)を参照するキーワード
「自分自身をみろ」みたいな。
そのうちPHPでも使うらしい。
2.呼び出し元のキーワード
ボタンが5つあって、全部同じ処理をするとする
処理の中側が「誰が呼んだんだ、どのボタンだ」というのを特定するのに役立つらしい。
呼び出し元がわかるのでボタンにidをふっとく必要もなくなるらしい。
サムクラスの中に5つのクリック前提のイメージがある
→
$('.thumb img').on('click',function(){
クリックされたら、呼び出し元をコンソールに表示
--->ここまで
$(function(){
$('.thumb img').on('click',function(){
var src = $(this).attr('src');//自分を呼んだもののソース属性を知りたい
//attrに引数が1つでゲッターの役割をさせる
console.log(src);
});
});
thisとは、イベントの発生した呼び出し元を補足する。（関数の）呼び出し元の特定。
シングルコートで囲ったりはしない
「自分の呼び出し元」を「attrでソースをゲットしろ」、それを変数に入れてコンソールで表示という構造になっている
--->app.js
$(function(){
$('.thumb img').on('click',function(){
var src = $(this).attr('src');//自分を呼んだもののソース属性を知りたい
//attrに引数が1つでゲッターの役割をさせる
var alt = $(this).attr('alt');//altに対しても同様に
//console.log(src+alt);
/*
$('.main img').attr('src',src);//メインイメージの書き換え
$('.main alt').attr('alt',alt);
*/
$('.main p').text(alt);//説明文をtextで書き換える
$('.main img').attr('src',src).attr('alt',alt);//メソッドチェーンで書くとこう
});
});
こう書いてもいいし ↓
$('.main img').attr('src',src);//メインイメージの書き換え
$('.main alt').attr('alt',alt);
メソッドチェーンで書いてもいい ↓
$('.main img').attr('src',src).attr('alt',alt);
同じところに対する操作は続けて記述ができる
もしこれで、クリックしたサムネイルの枠の色を変えたいとなったら、
$('.thumb img').css('border-color','#FFF');//とりあえず全部白にして、
$(this).css('border-color','#000');//クリックしたサムネイルの枠色を変える
1.これもthisですむ
2.枠線を変えるのでメソッドはcss
3.thisは呼び出したところをオブジェクトとして持っているので、直にcssメソッドで記述ができる
動くリンクというのは公共性の高いサイトではNGらしい
（カルーセル：自動で流れていく画像群でそれがリンクになっているとかいうタイプの）
