jQuery を使用して Web アプリケーションの画像ソースを動的に変更するにはどうすればよいですか?

jQuery を使用した画像ソースの操作

Web アプリケーションでは、要素の外観を動的に制御することは、魅力的なユーザー エクスペリエンスを実現するために不可欠です。一般的なシナリオの 1 つは、ユーザー インタラクションに基づいて画像ソースを交換する必要があることです。

Web ページに 2 つの画像が含まれるシナリオを考えてみましょう。

<div>

画像ソースを imgx_off に変更したいと考えています。 .gif、ここで、x はユーザーがクリックしたときの画像番号 (1 または 2) を表します。この機能により、変更や状態遷移を視覚的に表現できます。

jQuery の attr() を使用した解決策

jQuery の attr() 関数は、HTML 属性を動的に操作する多用途な方法を提供します。この場合、画像の src 属性を変更できます。

この機能を実装するには:

1. 各画像に img1 や img2 などの一意の ID を割り当てます。
2. 画像が次の場合に src 属性を変更するには、attr() 関数を使用します。

$('#img1').on({
    'click': function(){
        $('#img1').attr('src','img1_off.gif');
    }
});
$('#img2').on({
    'click': function(){
        $('#img2').attr('src','img2_off.gif');
    }
});

画像ソースの回転

機能をさらに強化するために、画像の回転を実装できます。これにより、画像は 2 つの事前定義された状態 (例: img1_on から img2_off、またはその逆) の間でシームレスに切り替えることができます。

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

このスクリプトは、クリックされた画像の現在の src 属性をチェックし、それを更新します。現在の状態に基づいて適切な画像ソースを選択します。

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