jQueryによる画像ソースの変更

jQueryのattr()関数を使うことができます。 例えば、imgタグのid属性が'my_image'の場合、次のようにします。

そして、画像のsrcをjQueryで以下のように変更することができます。

$("#my_image").attr("src","second.jpg");

これを click イベントにアタッチするには、次のように書きます。

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

画像を回転させるには、次のようにします。

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

画像の src を変更して、画像をクリックしたときに、HTMLの中にあるすべての画像（具体的には d1 id と c1 class の中にある画像）を回転させる方法を紹介しましょう。

また、ドキュメントの準備ができた後にページをクリーンアップして、最初に1つの画像だけが表示されるようにする方法も紹介します。

全コードを見る

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

内訳 {{5542066}}。

1.画像を含むリンクのコピーを作成する（注：リンクのhref属性を利用して機能を追加することもできます...例えば、[各画像の下に動作するリンクを表示][1]）。

        var $images = $("#d1 > .c1 > a").clone(); ;

2.HTMLに何枚の画像があったかを確認し、どの画像が表示されているかを追跡するための変数を作成します。

    var $length = $images.length;
    var $imgShow = 0;

3.最初の画像だけが表示されるように、ドキュメントのHTMLを修正します。他の画像はすべて削除します。

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

4.画像のリンクがクリックされたときに処理する関数をバインドする。

        $("#d1 > .c1 > a").click(function(event) {)
            $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ) を実行します。
            event.preventDefault();
        });

上のコードの肝は、`++$imgShow % $length`を使って、画像を含むjQueryオブジェクトを循環させることです。++$imgShow % $length`では、まずカウンターを1つ増やし、次にその数字を画像の数で置き換えます。これにより、結果的にインデックスは `0` から `length-1` まで循環することになり、これが `$images` オブジェクトのインデックスとなります。つまり、このコードは、2枚、3枚、5枚、10枚、100枚の画像でも動作します。各画像を順番に循環させ、最後の画像に到達したら最初の画像から再開します。

さらに、**[`.attr()`][2]**を使って、画像の "src "属性を取得・設定しています。オブジェクトの中から要素を選択するには、`$images`を**[jQuery context][3]**に設定し、`$(selector, context)`という形式で指定します。そして、**[`.eq()`][4]**を使って、興味のある特定のインデックスを持つ要素だけをピックアップします。

[jsFiddleの例：3枚の画像][5]。

また、srcsを配列にして保存することもできます。

また、画像の周りのアンカータグからhrefを取り込む方法は以下の通りです。
[jsFiddleの例][7]。

また、このようにjQueryでもできます。

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

画像ソースに複数の状態がある場合に条件をつけることができます。