时间戳

首页 > 解决方案 > 是否可以在没有 jQuery 的情况下切换 div？

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

问题描述

我有以下代码显示一个表单字段，一次分段为 DIV，每次单击 Next 都会隐藏当前 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>

是否可以在不使用 jQuery 的情况下完成上述操作？这将如何实现？

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

谢谢

标签： javascriptjqueryhtml

解决方案

你可以只使用普通的旧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';

推荐阅读