jquery裡怎樣換圖

在前端開發中，經常需要根據不同的狀態或事件來動態更改頁面中的圖片，這時候就需要用到 jQuery 來完成圖片的切換。

以下將介紹兩種常用的 jQuery 圖片切換方法。

一、透過新增 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 程式碼中定義了一個圖片和一個按鈕，點擊按鈕後會觸發JavaScript 程式碼，透過新增或移除圖片上的CSS 類，來切換圖片的來源位址。同時，我們在 CSS 檔案中定義了 .image2 類，使得圖片的來源位址可以被動態更改。

二、透過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() 方法來更改圖片的來源位址，實現圖片的切換。

總結

以上就是兩種常用的 jQuery 圖片切換方法。透過新增或移除 CSS 類別和直接變更圖片來源位址，都可以實現圖片的動態切換。我們可以根據具體需求選擇不同的方法來完成圖片切換的效果。

以上是jquery裡怎樣換圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！