◆$(this)を使って、画像の切替をしてみる
↓HML側※このPタグの画像をリストのテキストリンクで切り替える。
▼普通に指定したとき
aタグを指定(順番)して、ひとつひとつに、この画像にとんでくださいねと命令している。
↓↓
▼$(this)を使ってみる
クリックされた<a>(イベント発生)に対して、その要素を使って命令している。
※テキストリンクの<a>はこんな感じに指定しておく。
<a href=”img01.jpg”>イメージ01です。</a>
◆どうやって使うのか、どこに置くのか
イベントクリックで、イメージの切替をしたとき.attr(”src”,”img01.jpg”)
※クリックしたらsrcにimg01.jpgを差し替えてね。の意
↓
これを$(this)を使うと…
.attr(”src”,$(this).attr(”href”))
※クリックしたら、クリックしたhrefをsrcに差し替えてね。の意
テキストリンクの場合、altもテキストリンクをそのまま入れることもできる
.attr(”alt”,$$(this).text());
HTML側の要素をかくだけで、自動的にそのものの要素を習得してくれる
★その他、thisとの違い
簡単に言うと、jQueryオブジェクトとして使うときは→$(this)
--参考サイト↓--
jQueryの$(this)とthisの違い : ずっと工事中
http://blog.livedoor.jp/eeu/archives/55307897.html
0 件のコメント:
コメントを投稿