如何使用 jQuery on Click 动态更改图像源？

使用 jQuery 修改图像源

您的目标是在以下 DOM 结构中动态更改图像源：

<div>

单击每个图像后，您希望将其源更改为“imgx_off.gif”，其中“x”对应为“1”或“2”。

解决方案：利用 jQuery 的 attr() 函数

是的，无需 CSS 即可实现此目的。 jQuery 的 attr() 方法使您能够修改 DOM 元素属性，包括图像源 URL。

例如，如果您的图像标签具有“my_image”的 id 属性，则以下代码即可实现此目的：

<img>

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

将此操作附加到点击事件：

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

以上是如何使用 jQuery on Click 动态更改图像源？的详细内容。更多信息请关注PHP中文网其他相关文章！