jQueryで画像を変更する方法

フロントエンド開発では、さまざまな状態やイベントに応じてページ上の画像を動的に変更する必要があることがよくありますが、このとき、画像の切り替えを完了するには jQuery を使用する必要があります。

次に、よく使われる jQuery の画像切り替え方法を 2 つ紹介します。

1. CSS クラスを追加して画像を切り替える

画像に CSS クラスを追加または削除することで画像を切り替える方法です。

HTML コード:

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript コード:

$(document).ready(function(){
  $("#changeImage").click(function(){
    $("#myImage").toggleClass("image2");
    if($("#myImage").hasClass("image2")){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

CSS コード:

.image2 {
  content: url(image2.jpg);
}

HTML コードで画像とボタンを定義します。画像の CSS クラスを追加または削除することで、画像のソース アドレスを切り替えるボタンの後に JavaScript コードがトリガーされます。同時に、画像のソースアドレスを動的に変更できるように、CSS ファイルに .image2 クラスを定義しました。

2. jQuery の attr() メソッドを介して画像を切り替える

このメソッドは、jQuery の attr() メソッドのソース アドレスを介して画像を直接変更します。

HTML コード:

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

JavaScript コード:

$(document).ready(function(){
  $("#changeImage").click(function(){
    var imgSrc = $("#myImage").attr("src");
    if(imgSrc == "image1.jpg"){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

HTML コード内に画像とボタンも定義します。ボタンがクリックされると、JavaScript コードは次のようになります。 ##attr() メソッドを通じてトリガーされ、イメージのソース アドレスを変更し、イメージの切り替えを実現します。

概要

上記は、一般的に使用される 2 つの jQuery 画像切り替えメソッドです。画像の動的な切り替えは、CSS クラスを追加または削除し、画像ソース アドレスを直接変更することで実現できます。特定のニーズに応じて、さまざまな方法を選択して画像切り替えの効果を実現できます。

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