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

jQuery を使用して画像ソースを変更する

次のような Web 構造内:

<div>

ユーザーが画像ソースをクリックしたとき画像のソースを imgx_off.gif に更新する必要があります。ここで、x は画像を表します

jQuery はこのタスクを処理できますか?それとも CSS が推奨される方法ですか?

jQuery の attr() 関数を使用する

jQuery は、 attr() 関数を使用すると、属性値を変更できます。 ID が my_image の画像ソースを変更するには:

$('#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 サイトの他の関連記事を参照してください。