javascript - 使用 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 来更改图像？

Answer 1

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

<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);
    }
});