如何使用 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 属性并使用根据当前状态选择适当的图像源。