使用 jQuery 更改图像源

Question

我的 DOM 看起来像这样：

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

当有人单击图像时，我希望图像 src 更改为 <img src="imgx_off.gif"> 其中 x 表示图像编号 1 或 2。

这是可能的还是我必须使用 CSS 来更改图像？

原文由 user67033 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 jQuery 的 attr() 函数。例如，如果您的 img 标记具有 id 属性“my_image”，您可以这样做：

 <img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />

然后，您可以使用 jQuery 更改图像的 src ，如下所示：

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

要将此附加到 click 事件，您可以编写：

 $('#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);
    }
});

原文由 jonstjohn 发布，翻译遵循 CC BY-SA 4.0 许可协议