點擊時更改圖像：一種簡單的方法
當面臨在點擊事件上動態交換圖像的任務時，人們最初可能會求助於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中文網其他相關文章！
