クリック時に jQuery を使用して画像ソースを動的に変更するにはどうすればよいですか?

jQuery を使用した画像ソースの変更

目的は、次の DOM 構造内で画像ソースを動的に変更することです:

<div>

各画像をクリックすると、そのソースを「imgx_off.gif」に変更したいとします。ここで、「x」は"1" または "2" に対応します。

解決策: jQuery の attr() 関数を利用する

はい、CSS なしでこれを実現できます。 jQuery の attr() メソッドを使用すると、画像ソース URL を含む DOM 要素の属性を変更できます。

たとえば、画像タグが「my_image」の id 属性である場合、次のコードがその目的を果たします。

<img>

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

このアクションをクリックに付加するにはイベント:

$('#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);
    }
});

以上がクリック時に jQuery を使用して画像ソースを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。