如何使用 jQuery on Click 動態更改圖像來源？

使用 jQuery 修改影像來源

您的目標是在以下 DOM 結構中動態變更影像來源：

<div>

點擊每個圖像後，您希望將其來源更改為“imgx_off.gif”，其中“x”對應為“1”或“2”。

解決方案：利用 jQuery 的 attr() 函數

是的，無需 CSS 即可實現此目的。 jQuery 的 attr() 方法可讓您修改 DOM 元素屬性，包括圖片來源 URL。

例如，如果您的映像標籤具有「my_image」的 id 屬性，則以下程式碼即可實現此目的：

<img>

$('#my_image').attr("src", "second.jpg");

將此操作附加到點擊事件：

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

影像旋轉

如果要旋轉影像，請使用下列程式碼：

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

以上是如何使用 jQuery on Click 動態更改圖像來源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！