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

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

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

<div>
<p>各画像をクリックすると、そのソースを「imgx_off.gif」に変更したいとします。ここで、「x」は"1" または "2" に対応します。</p>
<p><strong>解決策: jQuery の attr() 関数を利用する</strong></p>
<p>はい、CSS なしでこれを実現できます。 jQuery の attr() メソッドを使用すると、画像ソース URL を含む DOM 要素の属性を変更できます。</p>
<p>たとえば、画像タグが「my_image」の id 属性である場合、次のコードがその目的を果たします。</p>
<pre class="brush:php;toolbar:false"><img  alt="クリック時に jQuery を使用して画像ソースを動的に変更するにはどうすればよいですか?" >

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