jquery経由で画像パスを変更する

Web サイトの継続的な開発に伴い、動的な効果の需要もますます高まっています。高速、シンプル、便利な JavaScript ライブラリである jQuery は、フロントエンド ページの開発プロセスを大幅に簡素化します。この記事では、jQuery を使用して画像のパスを変更する効果を実現する方法を紹介します。

1. 要件分析

異なるスキンまたはテーマの複数のセットが必要な場合、スキンを変更するたびにすべてのイメージのパスを手動で変更する必要がある場合、間違いなく非常に面倒になります。 。 案件。したがって、画像のパスを変更するためのより便利な方法が必要です。

2. ソリューション設計

1. パスを変更する必要がある画像に、「change-path」などのクラス属性を追加します。

<img  src="img/1.jpg" class="change-path" / alt="jquery経由で画像パスを変更する" >

2. jQuery を通じてこれらの img タグを取得し、パスを置き換えます。

$('.change-path').each(function() {
    var oldSrc = $(this).attr('src'); //获取原图片路径
    var newSrc = 'newPath/' + oldSrc.substring(oldSrc.lastIndexOf('/') + 1); //构造新图片路径，这里假设新路径为“newPath/”
    $(this).attr('src', newSrc); //替换图片路径
});

3. コードの実装

次に、簡単な例を使用して、jQuery を通じて画像パスを変更する方法を示します。

1. 準備

その前に、いくつかの写真を準備する必要があります。以下の図に示すように:

2. 実装コード

次のコードを HTML ファイルに追加します。コード、最初に jQuery ライブラリを導入しました。次に、$(".change-path") セレクターを使用して、「change-path」クラス属性を持つすべての img タグを取得し、次に .each() メソッドを使用してこれらのタグを反復処理しました。各タグを走査するとき、.attr() メソッドを通じて各タグの元の src 属性値を取得し、それを変数 oldSrc に割り当てます。次に、必要に応じて oldSrc を変更し、newSrc を取得します。最後に、.attr() メソッドを使用して、変更した値を元の src 属性に割り当てます。

3. 実行効果

このコードを実行すると、次の効果がわかります:

すべての画像が表示されていることがわかります。パスは、ニーズを満たす「newPath/1.jpg」、「newPath/2.jpg」、「newPath/3.jpg」に変更されました。

4. 概要

この記事では、jQuery を使用して画像のパスを変更する方法を紹介します。この方法により、パスを変更する必要があるすべての画像を簡単に変更できるため、開発作業がより効率的かつシンプルになります。もちろん、jQuery を使用して他の動的効果を実装することもでき、読者は必要に応じてそれらを学習して使用できます。

以上がjquery経由で画像パスを変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。