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

使用 jQuery 操作影像來源

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

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

<div>
<p>您希望將圖像來源更改為imgx_off .gif，其中x 代表用戶點擊時的圖像編號（1 或2 ）。此功能允許以視覺化方式表示變更或狀態轉換。 </p>
<h3 id="使用-jQuery-的-attr-的解決方案">使用 jQuery 的 attr() 的解決方案</h3>
<p>jQuery 的 attr() 函數提供了一種動態操作 HTML 屬性的通用方法。在這種情況下，它允許您更改圖像的 src 屬性。 </p>
<p>要實現此功能：</p>
<ol>
<li>為每個影像分配唯一的 id，例如 img1 和 img2。 </li>
<li>使用 attr() 函數變更影像時的 src 屬性</li>
</ol>
<pre class="brush:php;toolbar:false">$('#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 屬性並使用根據目前狀態選擇適當的影像來源。