如何从Div数组中获取下一个对象？实现提交后切换下一题

刚接触JavaScript的话，这个需求其实很容易实现，咱们一步步来拆解，从HTML结构到JS逻辑都给你讲清楚：

1. 先搭好基础HTML结构 #

首先给所有问答题目统一的类名（比如trivia-item），每个题目里包含问题内容和提交按钮，这样方便JS统一操作：

<!-- 可以把所有题目放在一个父容器里，方便后续事件委托 -->
<div id="trivia-wrapper">
  <div class="trivia-item">
    <p>问题1：JavaScript的创始人是谁？</p>
    <input type="text" placeholder="输入你的答案">
    <button class="submit-btn">提交答案</button>
  </div>
  <div class="trivia-item">
    <p>问题2：以下哪个不是JavaScript的原始数据类型？</p>
    <select>
      <option>String</option>
      <option>Array</option>
      <option>Boolean</option>
    </select>
    <button class="submit-btn">提交答案</button>
  </div>
  <!-- 更多问答题目... -->
</div>

2. CSS默认隐藏所有题目 #

先通过CSS把所有题目设为隐藏，只给当前要显示的题目加一个active类来控制显示：

.trivia-item {
  display: none;
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
}

.trivia-item.active {
  display: block;
}

3. JavaScript核心逻辑实现 #

这部分是关键，咱们分步骤写，每一步都加注释，方便你理解：

方案一：直接给每个按钮绑定事件（适合题目不多的情况） #

// 1. 获取所有题目元素和提交按钮
const allTriviaItems = document.querySelectorAll('.trivia-item');
const allSubmitButtons = document.querySelectorAll('.submit-btn');

// 2. 初始化当前显示的题目索引（从0开始，对应第一个题目）
let currentQuestionIndex = 0;

// 3. 页面加载时，先显示第一个题目
allTriviaItems[currentQuestionIndex].classList.add('active');

// 4. 给每个提交按钮绑定点击事件
allSubmitButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 防止用户点击隐藏题目的按钮（只处理当前显示题目的按钮）
    if (index !== currentQuestionIndex) return;

    // --- 这里可以加你的自定义代码，比如验证答案 ---
    // 比如获取用户输入的答案：
    // const userAnswer = button.previousElementSibling.value;
    // 然后和正确答案对比，验证通过再继续下一步

    // 5. 隐藏当前题目
    allTriviaItems[currentQuestionIndex].classList.remove('active');

    // 6. 切换到下一个题目
    currentQuestionIndex++;

    // 7. 如果还有下一个题目，就显示它；否则提示完成
    if (currentQuestionIndex < allTriviaItems.length) {
      allTriviaItems[currentQuestionIndex].classList.add('active');
    } else {
      alert('所有问答题目都完成啦！🎉');
    }
  });
});

方案二：事件委托（适合题目很多的场景，更高效） #

如果你的问答题目数量很多，遍历每个按钮绑定事件会有点浪费性能，用事件委托更合适：给父容器绑定一次事件，就可以处理所有按钮的点击：

const triviaWrapper = document.getElementById('trivia-wrapper');
const allTriviaItems = document.querySelectorAll('.trivia-item');
let currentQuestionIndex = 0;

// 初始化显示第一个题目
allTriviaItems[currentQuestionIndex].classList.add('active');

// 给父容器绑定点击事件
triviaWrapper.addEventListener('click', (event) => {
  // 判断点击的元素是不是提交按钮
  if (!event.target.classList.contains('submit-btn')) return;

  // 找到当前按钮所在的题目元素
  const currentItem = event.target.closest('.trivia-item');
  // 获取当前题目的索引
  const itemIndex = Array.from(allTriviaItems).indexOf(currentItem);

  // 只处理当前显示的题目
  if (itemIndex !== currentQuestionIndex) return;

  // --- 同样可以在这里加答案验证逻辑 ---

  // 隐藏当前题目，切换到下一个
  currentItem.classList.remove('active');
  currentQuestionIndex++;

  if (currentQuestionIndex < allTriviaItems.length) {
    allTriviaItems[currentQuestionIndex].classList.add('active');
  } else {
    alert('全部完成！');
  }
});

4. 额外优化建议（给新手的小提示） #

• 答案验证：如果需要验证用户答案是否正确，可以把正确答案存在题目元素的data属性里，比如<div class="trivia-item" data-correct="Brendan Eich">，然后在JS里通过currentItem.dataset.correct获取正确答案，和用户输入对比。
• 样式自定义：CSS里的display: block可以换成display: flex等，根据你的布局需求调整。
• 状态保存：如果需要刷新页面后继续当前进度，可以用localStorage保存currentQuestionIndex的值，页面加载时读取这个值来恢复进度。

内容的提问来源于stack exchange，提问作者Maverick