Javascript 是否可以在没有jQuery的情况下切换div？

我有下面的代码，它一次显示一个表单字段，分为几个Div，每次单击Next都会隐藏当前Div并显示下一个Div：

function displayquestion(a){
  $(".questionholder").stop().hide();
  $("#question"+a).stop().show();
}

<form id="TheForm" style="display:block;">
<div class="questionholder" id="question1" style="display:none">
    Last name?<br>
    <input name="ln"><br>   
    <a class="next" onclick="displayquestion(2)">Next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
    Given Name?<br>
    <input name="gn"><br>
    <a onclick="displayquestion(3)">Next</a>
</div>
...
    <div class="questionholder" id="question35" style="display:none">
    All done, click Submit!<br>     
    <input type="submit" value="Submit">
</div>

函数显示问题（a）{
$（“.questionholder”）.stop（）.hide（）；
$（“#问题”+a）.stop（）.show（）；
}
姓氏？



下一个
给定名称？



下一个
...
全部完成，点击提交

不使用jQuery就可以完成上述任务吗？这将如何实现

原因是如果我可以避免jQuery althogether，它是我的项目的首选选项，因为我不应该依赖外部文件

---

谢谢

您可以使用简单的老javascript。jQuery只是一个抽象，它是隐藏在引擎盖下的javascript

所以不是

$(".questionholder").stop().hide();

你可以这样做

var lastQuestionId = '...';
var x = document.getElementsByClassName("questionholder");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
}
document.getElementById(lastQuestionId).style.display = 'block';

var lastQuestionId='…'；
var x=document.getElementsByClassName（“问题持有人”）；
var i；
对于（i=0；i

您可以这样更改您的功能

function displayquestion(a){
  var questions = document.getElementsByClassName("questionholder");
  for(var i=0; i < questions.length; i++) {
    questions[i].style.display = "none";
  }

  var nextQuestion = document.getElementById("question" + a);
  if(nextQuestion !== null) {
    nextQuestion.style.display = "block"
  }
}

函数显示问题（a）{
var questions=document.getElementsByClassName（“问题持有人”）；
对于（var i=0；i

使用vanilla JavaSrcipt有很多方法可以做到这一点。写它的一种方法是这样的：

function displayquestion(questionID) {
  document.querySelectorAll('.questionholder').forEach((element) => {
    element.style.display('none');
  });
  document.getElementById(questionID).style.display('block');
}

---

您还可以使用

类列表。切换

并使用类而不是设置内联样式

您可以使用DOM函数获取元素、隐藏和显示它们：

函数显示问题（索引）{
document.getElementById（'question'+（index-1））.style.display='none'；
document.getElementById（'question'+index.）.style.display='block'；
}

提供的所有答案的基本问题是，它们将视图用作数据。不要将视图用作数据，视图应该基于数据构建。相反，创建一个元素列表（数组），记录当前显示的元素的索引，这样可以很容易地隐藏当前元素，并从列表中选择要显示的下一个/上一个元素。对于未来关于“我能做什么？”的问题，如果没有jQuery，答案总是肯定的。jQuery是一个javascript库。它是javascript。使用jQuery可以做的任何事情，都可以自己重新发明轮子。你实际上应该问的问题是“我该怎么做？”，用javascript