javascript - 使用按钮按 ID 顺序显示和隐藏 div 标签

Question

我制作了一份小问卷，并将每个问题放在一个 div 标签中。我试图按顺序显示 div 标签，因此当用户单击“下一步”按钮时，它将移至下一个 div 并隐藏前一个。有点像寻呼系统？我考虑过创建某种 for 循环，但我觉得我的代码非常困惑。有什么建议么？提前致谢。

<form>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>



 <button type="button">Next</button> 
 <button type="button">Back</button> 
</form>

<script>
visible(){
document.getElementById('1').style.display = "block";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
}

Answer 1

您可以使用 javascript 函数来设置您的 div。这也使用 jQuery 实现平滑过渡。

<div id="1">Question 1</div>
<div id="2" class="hidden">Question 2</div>
<div id="3" class="hidden">Question 3</div>
<div id="4" class="hidden">Question 4</div>
<div id="5" class="hidden">Question 5</div>
<div id="6" class="hidden">Question 6</div>
<div id="7" class="hidden">Question 7</div>
<div id="8" class="hidden">Question 8</div>
<div id="9" class="hidden">Question 9</div>
<div id="10" class="hidden">Question 10</div>


<button type="button" onclick="reverseDiv();">Back</button>
<button type="button" onclick="advanceDiv();">Next</button> 

<script>
var divNum=1;

advanceDiv = function() {
    if(divNum < 10) {
        divNum++;
        $('#' + (divNum-1)).slideToggle();
        $('#' + divNum).slideToggle();
    }
    else {
        /* last slide reached */
    alert('last question');
    }
}

reverseDiv = function() {
  if(divNum > 1) {
        divNum--;
        $('#' + (divNum+1)).slideToggle();
        $('#' + divNum).slideToggle();
    }
  else {
    alert('first question');
  }
}
</script>

这是一个显示功能的 jsfiddle(还包括在功能之间移动的箭头键):https://jsfiddle.net/79xupebb/1/