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

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

聖光之護

发布： 2025-11-13 15:25:27

原创

480人浏览过

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

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

需求背景与实现挑战

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

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

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

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

HTML结构准备

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

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

<!-- 多个这样的元素可以独立工作 -->
<div class="card egg" data-img="https://picsum.photos/id/237/200/300">
  <div class="card-image">
    <img src="https://picsum.photos/id/238/200/300" alt="原始图片2"/>
  </div>
</div>

登录后复制

在这个HTML结构中：

造点AI

夸克 · 造点AI

325

查看详情

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

JavaScript实现逻辑

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

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

登录后复制

代码解析：

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

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

完整示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery图片切换与还原教程</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
        .card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            width: 220px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .card-image img {
            width: 200px;
            height: 200px;
            object-fit: cover; /* 保持图片比例，裁剪超出部分 */
            display: block;
            margin: 0 auto;
            border-radius: 4px;
        }
        .card.active {
            border-color: #007bff;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
            background-color: #e6f2ff;
        }
        p {
            margin-top: 10px;
            color: #555;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

    <h1>点击卡片切换图片并还原</h1>

    <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="原始图片1"/>
        </div>
        <p>点击我切换图片1</p>
    </div>

    <div class="card egg" data-img="https://picsum.photos/id/237/200/300">
        <div class="card-image">
            <img src="https://picsum.photos/id/238/200/300" alt="原始图片2"/>
        </div>
        <p>点击我切换图片2</p>
    </div>

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

登录后复制

以上就是jQuery实现点击父元素动态切换图片并还原的教程的详细内容，更多请关注php中文网其它相关文章！