如何在不使用大量 JavaScript 的情況下透過點擊更改圖像？

點擊時更改圖像：一種簡單的方法

當面臨在點擊事件上動態交換圖像的任務時，人們最初可能會求助於JavaScript 或jQuery 提供快速解決方案。但是，對於更簡單的場景，有一種替代方案可以避免使用大量 JavaScript 程式碼。

要輕鬆更改圖像，請考慮在圖像元素中添加唯一ID，如下所示：

<ul>
  <li><img src="image1.png">

接下來，創建一個簡單的JavaScript 函數來處理單擊時的圖像交換：

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}

在此函數中，將檢索目前影像來源並將其替換為新來源，其中包含“_colored”

最後，為每個圖像添加onclick 事件監聽器，以便在單擊時調用changeImage() 函數：

<ul>
  <li><img src="image1.png">

透過這種方法，可以在單擊時無縫交換圖像，而無需需要複雜的JavaScript 或偽選擇器。

以上是如何在不使用大量 JavaScript 的情況下透過點擊更改圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！