jquery 更改图片 onclick - Javascript (1)

📌 相关文章

📜 jquery 更改图片 onclick - Javascript (1)

📅 最后修改于: 2023-12-03 15:02:15.224000 🧑 作者: Mango

使用 jQuery 在 onClick 事件中更改图片

在该介绍中，我们将学习如何使用 jQuery 在 onClick 事件中更改图片。

HTML 代码

首先，我们需要一些 HTML 代码来包含图片。以下是示例代码：

<div>
  <img src="defaultImage.jpg" id="myImage">
</div>
<button id="changeImageButton">更改图片</button>

在上面的代码片段中，我们创建了一个包含默认图像的 <div> 元素，并在其中放置了一个带有 id 属性的 <img> 元素。我们还创建了一个用于更改图片的按钮。

使用 jQuery 更改图片

现在，我们来看看如何使用 jQuery 在 onClick 事件中更改图片。

$(document).ready(function(){
  $("#changeImageButton").click(function(){
    $("#myImage").attr("src", "newImage.jpg");
  });
});

在上面的代码片段中，我们使用 jQuery 选择器 $("#changeImageButton") 选择更改图片按钮并在其上添加单击事件处理程序。事件处理程序使用 $("#myImage") 选择器选择图片并将其 src 属性更改为新图像的路径。

完整 HTML 代码

最后，这是完整的 HTML 代码，用于在单击按钮时更改图片。

<!DOCTYPE html>
<html>
<head>
  <title>更改图片示例</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#changeImageButton").click(function(){
        $("#myImage").attr("src", "newImage.jpg");
      });
    });
  </script>
</head>
<body>
  <div>
    <img src="defaultImage.jpg" id="myImage">
  </div>
  <button id="changeImageButton">更改图片</button>
</body>
</html>

现在，当您单击 "更改图片" 按钮时，图像将更改为 newImage.jpg。