本教程详细介绍了如何利用jquery实现点击父级元素时，其内部图片能在两种状态间交替显示与还原。核心策略是动态管理`data-img`属性，使其在每次点击时存储当前图片的源地址，从而实现图片源的有效交换，确保点击行为能够反复切换图片，同时优化了选择器以提高代码的精确性。

在交互式网页设计中，根据用户操作（如点击）来切换元素状态并更新其内容是一种常见需求。例如，当一个卡片被点击时，我们可能希望它内部的图片发生变化，并在再次点击时恢复原状。传统的做法可能只实现单向切换，即图片只改变一次，而无法恢复。本教程将介绍一种健壮的方法，通过动态管理data-*属性来实现图片在点击父元素时的交替显示与还原。

问题背景与传统方法的局限

通常，我们会为父元素添加一个data-img属性来存储备用图片源，然后通过jQuery监听点击事件，在点击时切换父元素的active类，并用data-img中的图片源替换标签的src属性。

<div class="card egg" data-img="https://data.imgtools.co/output/tool/preview/400x400/face-extractor.png">
 <div class="card-image">
  @@##@@
 </div>
</div>

$('.egg').click(function(){
  $(this).toggleClass("active");
  var new_src = $(this).attr('data-img');
  // 这里的选择器 ".card-image img" 可能会影响到页面上所有匹配的图片
  $(".card-image img").attr("src",new_src);
});

这种方法的问题在于，data-img属性始终存储的是备用图片源。当图片被替换后，我们没有存储原始图片源的地方来在下一次点击时恢复它。因此，图片只能单向改变，无法实现交替显示。

解决方案：动态管理图片源

为了实现图片的交替显示，我们需要一种机制来在每次切换时“交换”当前图片源和备用图片源。核心思想是：在改变的src属性之前，先将当前的src值存储到data-img属性中，然后用data-img中原有的值来更新的src。这样，data-img属性就变成了一个动态的“交换缓冲区”，每次点击时，它都会持有当前图片的反向图片源。

此外，为了确保代码的精确性和可维护性，我们应该使用更具体的选择器，将图片操作限定在当前被点击的父元素内部。

HTML 结构

我们仍然使用带有data-img属性的父div来存储最初的备用图片源。

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情

<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">
    @@##@@
  </div>
</div>

jQuery 逻辑

以下是实现动态图片切换的jQuery代码：

$('.egg').click(function() {  
  // 1. 获取当前 data-img 属性中存储的“待切换”图片源
  const new_src = $(this).attr('data-img');  

  // 2. 获取当前被点击元素内部 img 标签的 src 属性，这是即将被替换的“当前”图片源
  const curr_src = $(this).find('.card-image img').attr('src');

  // 3. 将“当前”图片源存储回 data-img 属性，为下一次切换做准备
  // 此时，data-img 中存储的将是上一次的图片源（即当前显示的图片源）
  $(this).attr('data-img', curr_src);

  // 4. 切换父元素的 active 类
  $(this).toggleClass("active");  

  // 5. 将 img 元素的 src 更新为第一步获取的“待切换”图片源
  $(this).find('.card-image img').attr("src", new_src);
});

代码解析：

1. const new_src = $(this).attr('data-img');：首先，我们获取父元素data-img属性中当前存储的图片URL。在第一次点击时，这将是最初设置的备用图片。在后续点击中，这将是上一次点击时存储的原始图片或另一个备用图片。
2. const curr_src = $(this).find('.card-image img').attr('src');：接着，我们获取当前显示在标签上的图片URL。$(this).find('.card-image img')确保我们只选择当前被点击父元素内部的特定图片，而不是页面上所有匹配的图片，这大大提高了选择器的精确性。
3. $(this).attr('data-img', curr_src);：这是实现交替显示的关键一步。我们将刚刚获取到的当前的src值（即curr_src）写回到父元素的data-img属性中。这样，data-img现在存储的就是当前显示的图片源。当用户再次点击时，new_src变量将获取到这个curr_src值，从而实现图片还原。
4. $(this).toggleClass("active");：根据需要，切换父元素的active类，以实现样式上的变化。
5. $(this).find('.card-image img').attr("src", new_src);：最后，我们将标签的src属性更新为第一步中获取到的new_src。

通过这种动态交换data-img和src值的策略，每次点击都能确保data-img中存储的是下一次切换所需的图片源，从而完美实现了图片的交替显示与还原。

注意事项

• 选择器精度： 使用$(this).find('.card-image img')是至关重要的。它确保了图片操作的范围仅限于当前被点击的.egg元素内部的图片，避免了不必要的全局影响，尤其是在页面上存在多个.egg卡片时。
• *`data-属性的灵活性：**data-*`属性不仅可以用于存储静态数据，如本例所示，它还可以作为动态数据的临时存储或交换介质，极大地增强了前端逻辑的灵活性。
• 可扩展性： 这种模式非常适合应用于页面上多个独立的交互组件。每个.egg元素都会独立地管理其图片的切换状态，互不干扰。

总结

本教程通过一个实际案例，展示了如何利用jQuery动态管理data-img属性，巧妙地实现了点击父元素时内部图片的交替显示与还原功能。通过在每次点击时交换data-img属性和标签的src属性，并结合精确的选择器，我们创建了一个高效、灵活且易于维护的交互逻辑。这种方法不仅解决了图片单向切换的问题，也为处理类似的状态切换需求提供了有价值的思路。

以上就是使用jQuery实现点击父元素时图片交替显示与还原的详细内容，更多请关注其它相关文章！

相关文章： 如何使用Rector自动化升级旧代码_通过Composer安装和配置Rector进行代码重构  CSS响应式网页如何实现主次模块比例自适应_flex-grow与flex-shrink调整  必由学官方网站入口 必由学学生教师共用登录通道  php源码怎么在电脑上测试_电脑测试php源码方法步骤【教程】  Yii2模块参数配置指南：正确声明与访问模块级配置  汽车之家官方网站官网入口_汽车之家网页版直接进入  如何将HTML表格多行数据保存到Google Sheet  树莓派传感器触发：通过Twilio API发送WhatsApp消息教程  Angular Material 垂直步进器：实现底部到顶部排序的教程  Excel如何用迷你图显趋势_Excel用迷你图显趋势【趋势小图】  顺丰快件物流信息 官方网站查询入口  PHP文件上传至S3：策略、考量与避免本地存储的挑战  处理Kafka消费者会话超时：深入理解消息处理语义与幂等性  怎么搭建一个php网站源码_搭php网站源码搭建教程  c++如何实现单例设计模式_c++线程安全的单例模式写法  如何在Promise链中有效终止错误处理后的执行  c++中为什么推荐使用using替代typedef_c++现代化类型别名  React/Next.js中实现列表项的动态移动与状态管理：兼论唯一键的重要性  Win11文件资源管理器卡顿怎么修 Win11重置资源管理器进程优化响应速度【修复方法】  163邮箱登录密码 163邮箱忘记密码找回  微博网页版主页入口 微博官方网站免登录访问  整合Supabase认证与Django模型：跨模式迁移的解决方案  C++如何实现单例模式_C++设计模式之线程安全的单例写法  mc.js游戏直达 mc.js网页免下载版本秒进地址  Python自定义类排序：解决lambda键值访问TypeError的实践指南  美团外卖商家服务中心入口 美团商家版官网入口  蛙漫漫画免费阅读入口_蛙漫官方正版无广告纯净版  外媒分析《GTA6》定价：卖100美元可以但真没必要！  抖音网页版企业服务中心登录入口_抖音网页版企业登录平台  谷歌浏览器怎么给标签页静音_Chrome标签静音快捷操作  c++如何实现一个简单的软件渲染器_c++从零开始的3D图形学  小红书怎么解除第三方平台绑定_小红书多平台登录解绑方法介绍  HTML空白字符处理机制：渲染、DOM与编码实践  Flexbox布局实践：实现粘性导航栏与底部固定页脚  汽水音乐车机版8.9下载 汽水音乐车机版8.9版本安装入口  漫蛙漫画官方首页 漫蛙2漫画在线阅读入口  谷歌学术网站直达地址 谷歌学术搜索网页版一键进入  sublime怎么格式化代码_sublime代码美化与一键排版插件配置  生成rdflib自定义SPARQL函数：参数匹配与实践指南  c++如何使用std::memory_order控制原子操作顺序_c++ C++11内存模型详解  免费抖音短视频入口_抖音网页版短视频免费通道  浏览器打开即用 美图秀秀网页版入口  京东单号查询入口_京东快递订单追踪入口  J*aScript中向JSON对象添加新属性的正确姿势  WordPress插件开发：正确注册卸载钩子与避免常见陷阱  在J*a中如何开发简易电子商务商品管理系统_商品管理系统项目实战解析  Discord Slash 命令响应超时问题的异步解决方案  解决J*aScript中重复选择项的确认对话框显示问题  J*aScript教程：根据元素文本内容动态设置背景色  漫蛙漫画网页端入口 漫蛙2官方正版漫画站点