本教程详细介绍了如何使用jquery实现点击父级div时动态切换图片，并在再次点击时还原为原始图片。核心策略在于巧妙利用data-img属性动态存储当前图片源，并结合精确的选择器，确保每次点击都能在两张图片之间平滑切换，提供一个健壮且可扩展的解决方案。
需求背景与实现挑战
在前端交互设计中，常见需求是当用户点击一个父级容器时，容器内的图片进行切换，例如显示“激活”状态的图标或产品的不同视图。然而，一个普遍的挑战在于，如何在图片切换后，再次点击时能够将其还原回原始图片，而不是仅仅进行单向的替换。
简单地获取一个预设的替换图片源并将其应用到<img>标签上，无法实现图片还原，因为这种方法没有机制来“记住”原始图片的URL。要实现双向切换，我们需要一种动态管理图片状态的策略。
核心解决方案：动态数据存储与精确选择器
解决图片双向切换的关键在于：在每次图片切换操作发生之前，动态地将当前正在显示的图片源存储起来，以便在下一次点击时将其作为“新”的图片源使用。同时，为了确保操作的精准性，我们必须使用精确的选择器来定位目标图片，避免影响页面上其他无关的元素。
HTML结构准备
我们首先需要一个包含图片的父级div，并利用HTML5的data属性来存储一张备用图片源。这个data-img属性将作为我们动态存储和交换图片源的核心“缓冲区”。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 第一个可点击的卡片 -->
<div class="card egg" data-img="https://data.imgtools.co/output/tool/preview/400x400/face-extractor.png">
<div class="card-image">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3" alt="原始图片1"/>
</div>
</div>
<!-- 多个这样的元素可以独立工作 -->
<div class="card egg" data-img="https://picsum.photos/id/237/200/300">
<div class="card-image">
<img src="https://picsum.photos/id/238/200/300" alt="原始图片2"/>
</div>
</div>在这个HTML结构中：
- .egg 类标识了可点击的父级div。
- data-img 属性初始时存储的是第一张备用图片（即第一次点击后将显示的图片）。
- <img> 标签的 src 属性存储的是原始图片（即初始状态下显示的图片）。
JavaScript实现逻辑
接下来，我们将使用jQuery编写事件处理逻辑，实现图片的双向切换功能。
$('.egg').click(function() {
// 1. 获取当前父元素上data-img中存储的图片源。
// 在第一次点击时，这是初始设置的备用图片。
// 在后续点击时，这是上一次操作中存储的“原始”或“另一张”图片。
const new_src = $(this).attr('data-img');
// 2. 获取当前正在显示的图片的src属性。
// $(this).find('.card-image img') 精确地定位到当前点击的.egg内部的图片，
// 避免影响页面上其他同类元素。
const curr_src = $(this).find('.card-image img').attr('src');
// 3. 核心步骤：将当前显示的图片源（curr_src）存储回data-img属性。
// 这一步是实现图片还原的关键。它使得data-img属性总是持有下一次点击时需要显示的图片源。
$(this).attr('data-img', curr_src);
// 4. 可选：切换父元素的CSS类，例如用于视觉反馈或样式变化。
// 尽管图片切换不直接依赖此，但它常用于表示激活状态。
$(this).toggleClass("active");
// 5. 将图片源更新为从data-img获取到的new_src，完成图片切换。
$(this).find('.card-image img').attr("src", new_src);
});代码解析：
- const new_src = $(this).attr('data-img');: 在每次点击事件触发时，我们首先从当前被点击的.egg元素的data-img属性中获取即将要显示的图片URL。
- const curr_src = $(this).find('.card-image img').attr('src');: 接着，我们获取当前正在<img>标签中显示的图片URL。这里的$(this).find('.card-image img')是关键，它确保我们只操作当前被点击的.egg元素内部的图片，而不是页面上所有可能存在的.card-image img。
- $(this).attr('data-img', curr_src);: 这是实现图片双向切换的核心逻辑。我们将刚刚获取到的curr_src（当前显示的图片URL）重新赋值给data-img属性。这样，data-img属性现在就存储了“上一次”显示的图片，它将在下一次点击时被取出，从而实现图片的还原。
- $(this).toggleClass("active");: 这是一个辅助操作，用于切换父元素的CSS类。例如，可以为.egg元素添加或移除一个active类，以改变其边框、背景等样式，提供视觉上的状态反馈。
- $(this).find('.card-image img').attr("src", new_src);: 最后，我们将图片<img>标签的src属性更新为从data-img中获取到的new_src，完成本次图片的切换。
通过这种巧妙地动态更新data-img属性的策略，我们使得data-img始终作为存储“下一张”图片源的容器，从而实现了图片在原始状态和备用状态之间的循环切换。
完整示例
将上述HTML结构、CSS样式和JavaScript代码结合，即可创建一个功能完整的图片切换与还原组件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片切换与还原教程</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
.card {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 220px;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 8px;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card-image img {
width: 200px;
height: 200px;
object-fit: cover; /* 保持图片比例，裁剪超出部分 */
display: block;
margin: 0 auto;
border-radius: 4px;
}
.card.active {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
background-color: #e6f2ff;
}
p {
margin-top: 10px;
color: #555;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>点击卡片切换图片并还原</h1>
<div class="card egg" data-img="https://data.imgtools.co/output/tool/preview/400x400/face-extractor.png">
<div class="card-image">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3" alt="原始图片1"/>
</div>
<p>点击我切换图片1</p>
</div>
<div class="card egg" data-img="https://picsum.photos/id/237/200/300">
<div class="card-image">
<img src="https://picsum.photos/id/238/200/300" alt="原始图片2"/>
</div>
<p>点击我切换图片2</p>
</div>
<script>
$('.egg').click(function() {
const new_src = $(this).attr('data-img');
const curr_src = 
