こんにちは。トゥーアールの西畑です。jQueryによるJavaScript入門、11回目はattrを利用して属性値の制御を行ってみたいと思います。
まずはサンプルをご覧ください。
リンクをクリックすることにより画像が切り替わるギャラリーになります。
jQuerコード
$(function(){ $("a").click(function(){ $("img").attr("src",$(this).attr("href")); return false; }) });
XHTMLコード
<ul> <li><a href="img/pencil.jpg">鉛筆</a></li> <li><a href="img/paints.jpg">絵の具</a></li> <li><a href="img/ageha.jpg">アゲハ</a></li> <li><a href="img/cat.jpg">猫</a></li> </ul> <p><img src="img/pencil.jpg" alt="鉛筆" /></p>
それでは、attrメソッドの使い方を解説します。
属性値の取得
$("CSSセレクタ").attr("属性")
$()関数を利用して、CSSセレクタで要素を指定して、attr関数を利用して属性を指定すると属性値を取得することができます。
属性値の変更
$("CSSセレクタ").attr("属性","属性値")
$()関数を利用して、CSSセレクタで要素を指定して、attr関数で属性の後に属性値を指定することにより属性値を変更することができます。
サンプルではクリックの操作を利用してimg要素のsrc属性をa要素のhref属性と同じ値に書き換えています。
$("img").attr("src",$(this).attr("href"));
分けて書いたほうがわかりやすいかもしれませんね。
$(this).attr("href")
これがクリックされたa要素のhref属性を取得するattr関数です。
$("img").attr("src",属性値);
そして、これがimg要素のsrc属性を書き換えるattr関数です。
属性値の箇所にクリックされたa要素のhref属性を入れることによりサンプルのようなコードになります。
srcでソース切り替えができるのがいいですね。
title属性とかも使って、画像のタイトルまで切り替えてみましたが、
すごく便利そうですね
＞seven さん
もう少しいろいろなメソッドを覚えると様々な効果を付けることができますよ。本連載でもおいおい触れていきますね。
初めまして。
いつも参考にさせていただいております。
ひとつ質問ですが、クリックの画像表示の際に
fadeInでフェードを追加しようと色々試みましたがダメでした…。
フェードしながら画像表示はどのようにすれば出来るでしょうか？
＞tempo さん
コメントありがとうございます。
何をクリックした際に画像をフィードで表示しようとして、どこが駄目だったんでしょうか？
fadeIn()自体はimg要素に対応していますので、たぶん他の箇所が間違っている気がするのですが・・・