如何使用 jQuery 動態變更 Web 應用程式中的映像來源？

使用 jQuery 操作影像來源

在 Web 應用程式中，動態控制元素的視覺外觀對於吸引使用者體驗至關重要。常見的場景是需要根據使用者互動交換圖像來源。

考慮一個網頁有兩個圖像的場景：

<div>

您希望將圖像來源更改為imgx_off .gif，其中x 代表用戶點擊時的圖像編號（1 或2 ）。此功能允許以視覺化方式表示變更或狀態轉換。

使用 jQuery 的 attr() 的解決方案

jQuery 的 attr() 函數提供了一種動態操作 HTML 屬性的通用方法。在這種情況下，它允許您更改圖像的 src 屬性。

要實現此功能：

1. 為每個影像分配唯一的 id，例如 img1 和 img2。
2. 使用 attr() 函數變更影像時的 src 屬性

$('#img1').on({
    'click': function(){
        $('#img1').attr('src','img1_off.gif');
    }
});
$('#img2').on({
    'click': function(){
        $('#img2').attr('src','img2_off.gif');
    }
});

影像來源的旋轉

為了進一步增強功能，您可以實現影像旋轉。這允許圖像在兩個預定義狀態之間無縫切換（例如，從 img1_on 到 img2_off，反之亦然）。

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

此腳本檢查點擊影像的目前 src 屬性並使用根據目前狀態選擇適當的影像來源。

以上是如何使用 jQuery 動態變更 Web 應用程式中的映像來源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！