JavaScript求助：如何实现wrapper类元素的逐个定时显示？

问题分析 #

你的代码里所有setTimeout都设置了相同的5000ms延迟，所以会同时触发，导致所有元素一次性隐藏。另外HTML里存在重复id的问题（id="inner"出现两次），id是页面唯一标识符，必须修正，否则可能引发后续操作异常。

修正方案 #

第一步：修复HTML重复id问题

把重复的id改为唯一值，比如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Cell One</title>
</head>
<body>
  <div class="wrapper">
    <div class="x" id="inner1">
      <p>Test</p>
    </div>
    <div class="x" id="inner2">
      <p>Testing</p>
    </div>
  </div>
  <script src="./main.js"></script>
</body>
</html>

方案1：逐个按顺序隐藏元素（初始全部显示）

给每个元素的setTimeout设置递增的延迟，实现第一个元素5秒后隐藏，第二个10秒后隐藏：

// 选择wrapper下的所有.x元素
const divs = document.querySelectorAll('.wrapper .x');

divs.forEach((div, index) => {
  setTimeout(() => {
    div.style.display = 'none';
  }, 5000 * (index + 1)); // 每个元素延迟递增5秒
});

方案2：依次显示每个元素（每个停留5秒）

如果需求是先隐藏所有元素，然后逐个显示，每个停留5秒后切换到下一个，可以这样做：

先在style.css里初始隐藏所有元素：

.wrapper .x {
  display: none;
}

然后用递归控制显示顺序：

const divs = document.querySelectorAll('.wrapper .x');
let currentIndex = 0;

function toggleDiv() {
  // 隐藏上一个元素（如果不是第一个）
  if (currentIndex > 0) {
    divs[currentIndex - 1].style.display = 'none';
  }
  // 显示当前元素
  if (currentIndex < divs.length) {
    divs[currentIndex].style.display = 'block';
    currentIndex++;
    // 5秒后执行下一次切换
    setTimeout(toggleDiv, 5000);
  }
}

// 启动流程
toggleDiv();

关键原理 #

• 使用querySelectorAll获取元素集合，比getElementsByClassName更稳定（后者是动态集合，可能引发意外问题）。
• 通过index计算递增延迟，或者用递归函数控制顺序，实现元素的依次操作，避免同时触发。

内容的提问来源于stack exchange，提问作者Dad The Gamer