jQuery 在按钮单击延迟 3 秒时更改图像

本文将使用 jQuery 实现一个功能：点击按钮可以更改图像，但要在延迟 3 秒后才能更改。

实现思路

1. 首先，在 HTML 文件中添加一个按钮和一个图像，如下所示：

<button id="change-btn">更改图片</button>
<img id="my-image" src="default-image.png">

2. 给按钮添加一个点击事件监听器，当按钮被点击时，延迟 3 秒后执行更改图像的操作。

3. 在更改图像的操作中，我们将更改图像的 src 属性为新的图片地址。

完整代码

<button id="change-btn">更改图片</button>
<img id="my-image" src="default-image.png">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#change-btn").click(function() {
        setTimeout(function() {
            $("#my-image").attr("src", "new-image.png");
        }, 3000);
    });
});
</script>

代码解释

• $(document).ready()：该函数将在文档加载完成后执行，确保 jQuery 可以正确绑定 DOM 元素。
• $("#change-btn")：选取 ID 为 change-btn 的按钮，使用 .click() 绑定点击事件监听器。
• setTimeout()：延迟 3 秒后执行回调函数。
• $("#my-image")：选取 ID 为 my-image 的图像。
• .attr()：设置或获取 HTML 元素的属性。

结论

本篇文章中，我们使用 jQuery 实现了一个按钮单击延迟 3 秒后更改图像的功能。通过学习本文所述的实现思路，我们也可以实现更多类似的交互效果。