如何用按钮实现图像的顺序切换与自动隐藏-html教程-PHP中文网

本文介绍一种简洁可靠的 JavaScript 方案，通过维护显示索引、检测元素存在性，实现点击“Next”按钮时逐个显示 section 并自动隐藏前一张图像，避免重叠，适用于视觉小说等场景。

本文介绍一种简洁可靠的 javascript 方案，通过维护显示索引、检测 `` 元素存在性，实现点击“next”按钮时逐个显示 section 并自动隐藏前一张图像，避免重叠，适用于视觉小说等场景。

在开发视觉小说类网页应用时，常需按顺序展示角色立绘（如 happy / neutral / sad 表情），且要求同一时刻仅显示一张图像——不能让多张图片叠加或残留。原始代码试图用 hasAttribute("d-block") 手动控制显隐，但存在语法错误（document.getElementById("sad","neutral") 不合法）、逻辑错位（未绑定到点击事件内）、以及缺乏状态管理等问题。

正确的思路是：以序号（index）驱动显示流程，每次点击前进一位，并智能判断是否需隐藏上一个含图像的 section。以下是优化后的完整实现：

<style>
  section {
    display: none;
  }
  .d-block {
    display: block;
  }
</style><section class="d-block">Horace</section><section>Ursa</section><section><img id="sad" src="/uploads/20260820/17871962486a867358ea1b2.jpg" alt="Sad expression"></section><section><img id="neutral" src="https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg?x-oss-process=image/resize,p_40" alt="Neutral expression"></section><section><img id="happy" src="https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg?x-oss-process=image/resize,p_40" alt="Happy expression"></section><section>Thus</section><button>Next</button>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const sections = document.querySelectorAll('section');
    const button = document.querySelector('button');
    let index = 1; // 初始显示第 0 项（Horace），首次点击应显示第 1 项（Ursa）

    button.addEventListener('click', () => {
      // 若存在下一个 section
      if (sections[index]) {
        // 若当前和上一个 section 都包含 <img>，则隐藏上一个（防重叠）
        if (hasImg(index) && hasImg(index - 1)) {
          sections[index - 1].classList.remove('d-block');
        }
        // 显示当前 section
        sections[index].classList.add('d-block');
      }

      // 尝试推进 index；若超出范围则禁用按钮
      if (!sections[++index]) {
        button.disabled = true;
      }
    });

    // 辅助函数：判断指定索引的 section 是否含有 <img> 元素
    function hasImg(i) {
      return sections[i] && sections[i].querySelector('img') !== null;
    }
  });
</script>

✅ 关键设计说明：

使用 index 统一追踪当前应激活的 section 序号，避免手动 DOM 查询带来的混乱；
hasImg() 函数封装图像检测逻辑，提升可读性与复用性；
隐藏逻辑仅作用于「前后两个 section 同时含 <img>」的场景（例如从 neutral 切换到 happy），文本 section（如 "Horace"）不受影响，保持自然过渡；
++index 在条件判断中完成自增，简洁高效，同时确保边界检查及时生效。

⚠️ 注意事项：