本教程详细介绍了如何使用jquery实现点击父级div时动态切换图片，并在再次点击时还原为原始图片。核心策略在于巧妙利用data-img属性动态存储当前图片源，并结合精确的选择器，确保每次点击都能在两张图片之间平滑切换，提供一个健壮且可扩展的解决方案。

需求背景与实现挑战

在前端交互设计中，常见需求是当用户点击一个父级容器时，容器内的图片进行切换，例如显示“激活”状态的图标或产品的不同视图。然而，一个普遍的挑战在于，如何在图片切换后，再次点击时能够将其还原回原始图片，而不是仅仅进行单向的替换。

简单地获取一个预设的替换图片源并将其应用到标签上，无法实现图片还原，因为这种方法没有机制来“记住”原始图片的URL。要实现双向切换，我们需要一种动态管理图片状态的策略。

核心解决方案：动态数据存储与精确选择器

解决图片双向切换的关键在于：在每次图片切换操作发生之前，动态地将当前正在显示的图片源存储起来，以便在下一次点击时将其作为“新”的图片源使用。同时，为了确保操作的精准性，我们必须使用精确的选择器来定位目标图片，避免影响页面上其他无关的元素。

HTML结构准备

我们首先需要一个包含图片的父级div，并利用HTML5的data属性来存储一张备用图片源。这个data-img属性将作为我们动态存储和交换图片源的核心“缓冲区”。

  

    @@##@@
  




  

    @@##@@
  

在这个HTML结构中：

• .egg 类标识了可点击的父级div。
• data-img 属性初始时存储的是第一张备用图片（即第一次点击后将显示的图片）。
• 标签的 src 属性存储的是原始图片（即初始状态下显示的图片）。

JavaScript实现逻辑

接下来，我们将使用jQuery编写事件处理逻辑，实现图片的双向切换功能。

Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。

下载

$('.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);
});

代码解析：

1. const new_src = $(this).attr('data-img');: 在每次点击事件触发时，我们首先从当前被点击的.egg元素的data-img属性中获取即将要显示的图片URL。
2. const curr_src = $(this).find('.card-image img').attr('src');: 接着，我们获取当前正在标签中显示的图片URL。这里的$(this).find('.card-image img')是关键，它确保我们只操作当前被点击的.egg元素内部的图片，而不是页面上所有可能存在的.card-image img。
3. $(this).attr('data-img', curr_src);: 这是实现图片双向切换的核心逻辑。我们将刚刚获取到的curr_src（当前显示的图片URL）重新赋值给data-img属性。这样，data-img属性现在就存储了“上一次”显示的图片，它将在下一次点击时被取出，从而实现图片的还原。
4. $(this).toggleClass("active");: 这是一个辅助操作，用于切换父元素的CSS类。例如，可以为.egg元素添加或移除一个active类，以改变其边框、背景等样式，提供视觉上的状态反馈。
5. $(this).find('.card-image img').attr("src", new_src);: 最后，我们将图片标签的src属性更新为从data-img中获取到的new_src，完成本次图片的切换。

通过这种巧妙地动态更新data-img属性的策略，我们使得data-img始终作为存储“下一张”图片源的容器，从而实现了图片在原始状态和备用状态之间的循环切换。

完整示例

将上述HTML结构、CSS样式和JavaScript代码结合，即可创建一个功能完整的图片切换与还原组件。

    
    
    
    
    



    
点击卡片切换图片并还原

    

        

            @@##@@
        
        
点击我切换图片1
    

    

        

            @@##@@
        
        
点击我切换图片2