使用jQuery实现点击父元素动态切换图片并还原的教程-html教程-PHP中文网

使用jQuery实现点击父元素动态切换图片并还原的教程

花韻仙語

发布： 2025-11-15 12:53:12

原创

844人浏览过

使用jQuery实现点击父元素动态切换图片并还原的教程

本教程详细讲解如何利用jquery实现点击父级div时动态切换其内部图片，并在再次点击时将其还原至原始状态。核心策略是巧妙地利用data属性来动态存储当前显示的图片源，从而在每次点击时交换并更新图片路径，确保图片能够在两种状态间准确无误地切换。

在网页开发中，我们经常需要实现交互式的UI效果，例如点击某个元素时改变其内部的图片。一个常见的需求是，当用户再次点击该元素时，图片能够恢复到原始状态。然而，如果仅仅是简单地从一个固定的data属性中获取新图片源并更新，往往会遇到无法还原的问题。

初始实现与局限性

考虑以下HTML结构，其中一个div（.egg）包含一个图片，并有一个data-img属性用于存储备用图片源：

<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代码尝试切换图片：

$('.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中指定的图片。但问题在于，data-img属性的值是固定的，因此在第二次点击时，它仍然会尝试将图片切换到相同的new_src，而无法恢复到原始图片。此外，$(".card-image img")选择器会匹配页面上所有带有.card-image类的父元素下的img标签，这可能导致非预期的行为，即点击一个.egg元素却改变了其他.egg元素内部的图片。

优化方案：实现图片双向切换与还原

要实现图片的双向切换和还原，我们需要一种机制来动态地存储“另一张”图片的源。最有效的方法是利用data属性来充当一个临时的存储介质。每次点击时，我们不仅更新图片的src，还要更新data-img属性，使其存储当前图片切换前的src。

以下是优化的jQuery代码实现：

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

$('.egg').click(function() {
  // 1. 获取即将被设置的新图片源（当前data-img中存储的）
  const new_src = $(this).attr('data-img');

  // 2. 获取当前图片元素的实际src
  // 注意：使用 $(this).find() 确保只操作当前点击元素内部的图片
  const curr_src = $(this).find('.card-image img').attr('src');

  // 3. 关键步骤：将当前图片的src存储回data-img属性
  // 这样，下次点击时，new_src就会是当前的curr_src，从而实现还原
  $(this).attr('data-img', curr_src);

  // 4. 可选：切换父元素的CSS类，用于样式控制（如添加边框、背景等）
  $(this).toggleClass("active");

  // 5. 更新图片元素的src为新的图片源
  $(this).find('.card-image img').attr("src", new_src);
});

登录后复制

完整的HTML结构与JavaScript代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换与还原示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .card {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 20px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
        }
        .card.active {
            border-color: blue;
            box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
        }
        .card-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>

<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" alt="原始图片" />
  </div>
</div>

<script>
$('.egg').click(function() {
  const new_src = $(this).attr('data-img');
  const curr_src = $(this).find('.card-image img').attr('src');

  $(this).attr('data-img', curr_src); // 存储当前图片的src，供下次点击时使用

  $(this).toggleClass("active"); // 切换active类，用于样式变化
  $(this).find('.card-image img').attr("src", new_src); // 更新图片src
});
</script>

</body>
</html>

登录后复制

工作原理详解：

第一次点击.egg时：
1. new_src 获取到的是 data-img 中存储的替代图片链接（例如 https://data.imgtools.co/...）。
2. curr_src 获取到的是 img 标签当前的原始图片链接（例如 https://play-lh.googleusercontent.com/...）。
3. $(this).attr('data-img', curr_src) 将 data-img 属性的值更新为原始图片链接。
4. img 的 src 被设置为 new_src（即替代图片）。
第二次点击.egg时：
1. new_src 获取到的是 data-img 中存储的原始图片链接（因为上次点击时已更新）。
2. curr_src 获取到的是 img 标签当前的替代图片链接。
3. $(this).attr('data-img', curr_src) 将 data-img 属性的值更新为替代图片链接。
4. img 的 src 被设置为 new_src（即原始图片）。

通过这种动态更新data-img属性的方式，我们巧妙地实现了图片源的双向交换和还原。

注意事项

选择器精确性： 务必使用 $(this).find('.card-image img') 或类似的选择器来确保只对当前被点击元素内部的图片进行操作。避免使用全局选择器如 $(".card-image img")，这可能导致意想不到的副作用，影响页面上所有匹配的图片。
data属性的动态管理： data-img属性在此方案中扮演了双重角色：它既是初始的备用图片源，也是每次切换时用于临时存储“另一张”图片源的媒介。理解并正确管理其值是实现双向切换的关键。
图片预加载： 如果图片较大或网络环境不佳，可以考虑在页面加载时预加载这些图片，以避免切换时出现延迟或闪烁。这可以通过CSS background-image或JavaScript创建Image对象实现，例如：
```
// 预加载图片
new Image().src = "https://data.imgtools.co/output/tool/preview/400x400/face-extractor.png";
new Image().src = "https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3";
```
登录后复制
可扩展性： 这种模式可以扩展到更复杂的场景，例如有多个图片需要切换，或者需要根据不同的状态切换不同的图片。可以通过在data属性中存储JSON字符串来管理多个图片源，或者使用更复杂的逻辑来判断应显示的图片。
无障碍性（Accessibility）： 考虑为图片添加适当的alt属性，尤其是在图片内容发生变化时，确保屏幕阅读器能正确描述图片内容。在示例中已添加 alt="原始图片"。