2011-04-22

$(this)

★イベントが発生した要素を習得してくれる。

◆$(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 件のコメント:

コメントを投稿

アマゾン和書/最新の情報