使用jQuery实现点击父元素时图片交替显示与还原

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用jQuery实现点击父元素时图片交替显示与还原

2025-11-12

浏览次数：次

返回列表

使用jQuery实现点击父元素时图片交替显示与还原

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

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

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

通常，我们会为父元素添加一个data-img属性来存储备用图片源，然后通过jQuery监听点击事件，在点击时切换父元素的active类，并用data-img中的图片源替换使用jQuery实现点击父元素时图片交替显示与还原标签的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属性始终存储的是备用图片源。当图片被替换后，我们没有存储原始图片源的地方来在下一次点击时恢复它。因此，图片只能单向改变，无法实现交替显示。

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

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

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

HTML 结构

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

Tanka

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

146 查看详情 Tanka

<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);
});

代码解析：

const new_src = $(this).attr('data-img');：首先，我们获取父元素data-img属性中当前存储的图片URL。在第一次点击时，这将是最初设置的备用图片。在后续点击中，这将是上一次点击时存储的原始图片或另一个备用图片。
const curr_src = $(this).find('.card-image img').attr('src');：接着，我们获取当前显示在标签上的图片URL。$(this).find('.card-image img')确保我们只选择当前被点击父元素内部的特定图片，而不是页面上所有匹配的图片，这大大提高了选择器的精确性。
$(this).attr('data-img', curr_src);：这是实现交替显示的关键一步。我们将刚刚获取到的当前的src值（即curr_src）写回到父元素的data-img属性中。这样，data-img现在存储的就是当前显示的图片源。当用户再次点击时，new_src变量将获取到这个curr_src值，从而实现图片还原。
$(this).toggleClass("active");：根据需要，切换父元素的active类，以实现样式上的变化。
$(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属性和使用jQuery实现点击父元素时图片交替显示与还原标签的src属性，并结合精确的选择器，我们创建了一个高效、灵活且易于维护的交互逻辑。这种方法不仅解决了图片单向切换的问题，也为处理类似的状态切换需求提供了有价值的思路。

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

# 绑定 # 湖南网站建设厂家排名 # 泸州关键词排名公司 # 乐肤洁营销推广方案 # 镇江网站优化效果图设计 # 广元优化网站咨询 # 南昌网站建设服务有什么 # 泉州新站seo技术 # 网站建设undefined推来客 # 网站稳定期推广中 # 阿勒泰好网站建设公司 # 是在 # 最初 # 实现了 # 输入框 # jquery # 多个 # 这是 # 的是 # 选择器 # 点击事件 # google # 网页设计 # cdn # go # ajax # 前端 # js # html

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript 动态图库与文本内容联动隐藏显示教程

下一篇：jQuery中nextUtil()方法如何使用？

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用jQuery实现点击父元素时图片交替显示与还原

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

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

HTML 结构

jQuery 逻辑

注意事项

总结