当前位置：首页 > 文章列表 > 文章 > 前端 > 点击切换图片效果实现方法

点击切换图片效果实现方法

2025-11-17 22:57:35 0浏览收藏

想要实现点击父元素切换图片显示效果吗？本文详细介绍了如何使用jQuery动态管理`data-img`属性，实现图片在两种状态间交替显示与还原，告别单向切换！核心策略是在每次点击时，将当前图片的源地址存储到`data-img`中，并用`data-img`中原有的值更新图片源，实现图片的有效交换。通过精确的选择器优化代码，确保只操作当前被点击元素内的图片，避免全局影响。这种方法不仅解决了图片单向切换的问题，也为处理类似的状态切换需求提供了有价值的思路。立即学习，提升你的网页交互体验！

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

本教程详细介绍了如何利用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">
  <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3"/>
 </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来存储最初的备用图片源。

<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" />
  </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属性和标签的src属性，并结合精确的选择器，我们创建了一个高效、灵活且易于维护的交互逻辑。这种方法不仅解决了图片单向切换的问题，也为处理类似的状态切换需求提供了有价值的思路。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~