ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryを使用して画像ソースを変更するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-23 02:38:42
オリジナル
611 人が閲覧しました

How Can I Change an Image Source Using jQuery?

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

Web ページに、ソースとして「imgx_on.gif」を持つ 2 つの画像を含む HTML 構造があるとします。 「x」は画像番号(1または2)を表します。画像をクリックすると、そのソースを「imgx_off.gif」に変更します。

jQuery による解決策

jQuery の attr() 関数を使用すると、画像のソース属性。これを実現するには、画像 (たとえば、「my-image」) に id 属性を割り当て、次のコードを実行します:

$('#my-image').attr('src', 'imgx_off.gif');
ログイン後にコピー

画像回転の例

画像を回転するには、次の jQuery コードを使用できます。

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.gif')
            ? 'img2_on.gif'
            : 'img1_on.gif';
         $(this).attr('src', src);
    }
});
ログイン後にコピー

このコードは、クリックされた画像のソースを次の画像と画像の間で交互に表示します。 「img1_on.gif」と「img2_on.gif」。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート