javascript - 循环遍历 <divs> 数组，每次使用 javascript 只显示一个

Question

我正在使用 javascript 和 html 制作一个小测验应用程序。测验设置为用户只能在页面上看到一个问题。当他们按下上一个和下一个按钮时，它会分别向用户显示上一个和下一个问题。

我想做的是循环遍历 getElementByClassName 返回的元素数组，并在每次用户按下“下一步”按钮时显示下一个项目。我目前遇到的问题是，当按下“下一步”按钮时，第一个元素之后的每个元素都会显示在页面上。页面上还有一个“上一个”按钮，向用户显示紧接的上一个元素，但是它删除了数组中的第一个元素，显示“无法设置未定义的属性‘显示’”错误和 div 的其余部分元素仍然显示在页面上。

这是当前代码 HTML:

const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const quizes = document.getElementsByClassName('quiz');
//show and hide divs when user presses next
nextBtn.addEventListener('click', function() {
  for (i = 0; i < quizes.length; i++) {
    quizes[i].style.display = "block";
  }
})

prevBtn.addEventListener('click', function() {
  if (quizes.length > 1) {
    for (i = 0; quizes.length > 1; i--) {
      if (quizes[i].display = "block") {
        quizes[i].style.display = "none";
      }
    }
  } else {
    alert('no more previous questions!')
  }
})

<div class="quiz">
  <p>Question 1</p>
  <input type="radio" name="answer" value="1">
  <input type="radio" name="answer" value="2">
  <input type="radio" name="answer" value="3">
</div>

<div class="quiz" style="display: none">
  <p>Question 2</p>
  <input type="radio" name="answer" value="1">
  <input type="radio" name="answer" value="2">
  <input type="radio" name="answer" value="3">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

非常感谢对错误的任何解释和正确方向的任何提示。谢谢。

Answer 1

我认为您应该做的是跟踪当前可见的问题，然后在使事件问题可见之前切换所有其他问题。

我在下面做了一个简单的例子，希望你能理解背后的想法，否则请告诉我。

const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const quizes = document.querySelectorAll('.quiz');
const total = quizes.length;
let count = 0;

const hideAll = () => quizes.forEach( q => q.style.display = 'none' );

const showNext = () => {
    if(count < total-1) count++;
  else {
    alert('no more questions');
    return;
  }
  
  hideAll();
  quizes[count].style.display = 'block';
}

const showPrev = () => {
    if(count > 0) count--;
  else {
    alert('no more previous questions');
    return;
  }
  
  hideAll();
  quizes[count].style.display = 'block';
}



//show and hide divs when user presses next
nextBtn.addEventListener('click',function(){
  showNext();
})


prevBtn.addEventListener('click',function(){
  showPrev();
})

<div class="quiz">
        <p>Question 1</p>
        <input type="radio" name="answer" value="1">
        <input type="radio" name="answer" value="2">
        <input type="radio" name="answer" value="3">
        </div>

        <div class="quiz" style="display: none">
        <p>Question 2</p>
        <input type="radio"  name="answer" value="1">
        <input type="radio"  name="answer" value="2">
        <input type="radio"  name="answer" value="3">
        </div>

<div class="quiz" style="display: none">
        <p>Question 3</p>
        <input type="radio"  name="answer" value="1">
        <input type="radio"  name="answer" value="2">
        <input type="radio"  name="answer" value="3">
        </div>
        
        <div class="quiz" style="display: none">
        <p>Question 4</p>
        <input type="radio"  name="answer" value="1">
        <input type="radio"  name="answer" value="2">
        <input type="radio"  name="answer" value="3">
        </div>
        
<button id="prev">Prev</button>
<button id="next">Next</button>