本教程详细介绍了如何使用jquery实现点击父级div时动态切换图片，并在再次点击时还原为原始图片。核心策略在于巧妙利用data-img属性动态存储当前图片源，并结合精确的选择器，确保每次点击都能在两张图片之间平滑切换，提供一个健壮且可扩展的解决方案。
需求背景与实现挑战
在前端交互设计中，常见需求是当用户点击一个父级容器时，容器内的图片进行切换，例如显示“激活”状态的图标或产品的不同视图。然而，一个普遍的挑战在于，如何在图片切换后，再次点击时能够将其还原回原始图片，而不是仅仅进行单向的替换。
简单地获取一个预设的替换图片源并将其应用到标签上，无法实现图片还原，因为这种方法没有机制来“记住”原始图片的URL。要实现双向切换，我们需要一种动态管理图片状态的策略。
核心解决方案：动态数据存储与精确选择器
解决图片双向切换的关键在于：在每次图片切换操作发生之前，动态地将当前正在显示的图片源存储起来，以便在下一次点击时将其作为“新”的图片源使用。同时，为了确保操作的精准性，我们必须使用精确的选择器来定位目标图片，避免影响页面上其他无关的元素。
HTML结构准备
我们首先需要一个包含图片的父级div，并利用HTML5的data属性来存储一张备用图片源。这个data-img属性将作为我们动态存储和交换图片源的核心“缓冲区”。
@@##@@@@##@@
在这个HTML结构中：
.egg 类标识了可点击的父级div。data-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’);: 接着，我们获取当前正在标签中显示的图片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);: 最后，我们将图片标签的src属性更新为从data-img中获取到的new_src，完成本次图片的切换。
通过这种巧妙地动态更新data-img属性的策略，我们使得data-img始终作为存储“下一张”图片源的容器，从而实现了图片在原始状态和备用状态之间的循环切换。
完整示例
将上述HTML结构、CSS样式和JavaScript代码结合，即可创建一个功能完整的图片切换与还原组件。
jQuery图片切换与还原教程 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; }点击卡片切换图片并还原
@@##@@点击我切换图片1
$('.egg').click(function() { const new_src = $(this).attr('data-img'); const curr_src =@@##@@点击我切换图片2
以上就是jQuery实现点击父元素动态切换图片并还原的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594573.html
微信扫一扫 
支付宝扫一扫 
