Javascript 出现在同一位置的问题

我的表格有很多问题。我正在寻找一种方法，使我的所有问题都显示在一个位置，而不是像下面代码中所示的那样显示在另一个位置的下方-

<p>  <SPAN ID="FirstQuestion"> Blah Blah Blah </p>       

 <button class="button1" button onclick="Function1()"><span>NEXT</span></button>


 <p>  <SPAN ID="SecondQuestion"> Blah Blah Blah  <br> </p>      

 <button class="button2" button onclick="Function2()"><span>NEXT</span></button>

<script> 

function Function1() {

 $( "#SecondQuestion" ).css('visibility', 'visible');
 $( "#FirstQuestion" ).css('visibility', 'hidden');

 </script> 

诸如此类的废话
下一个
废话废话废话

下一个
函数Function1（）{
$（“#第二个问题”）.css（‘可见性’、‘可见’）；
$（“#FirstQuestion”）.css（‘可见性’、‘隐藏’）；

我在表单中已经有近30个问题。我不希望在阅读第一个问题并单击“下一步”按钮后，这些问题出现在另一个问题的下方，而第二个问题应该出现在第一个问题出现的位置（当然隐藏第一个问题） 这可以做到吗？或者我必须为每个问题创建单独的页面，然后链接它。

---

希望我说得清楚。

可见性

只会屏蔽元素，留下它所占用的空间。也许您需要

.show（）

，

.hide（）

？

可见性隐藏将仅隐藏元素，但元素将保留其在屏幕上所占的空间。您应使用名为“显示并切换为块和无”的CSS样式

 $( "#SecondQuestion" ).css('display', 'block');
 $( "#FirstQuestion" ).css('display', 'none');

编辑：

诸如此类
诸如此类的废话

下一个
var计数=0；
函数nextQuestion（）{
var currentQuestion=$（“.question”）[count]；
var nextQuestion=$（“.question”）[++count]；
$（currentQuestion）.hide（）；
$（nextQuestion.show（）；
}

这里有两件事不对：

你的分数不对

如果您为每个问题编写单击事件，那么如果有100个问题呢

我试着模拟你想做的事 检查以下代码段

$（文档）.ready（函数（）{
var计数=1；
$（'.question:not（：first child'））.addClass（'hide'）；
$（'.question.next'）.bind（'click'，function（）{
//警报（计数）；
var$prevQuestion=$（'.问题：第n个子项（'+count+'））；
$prevQuestion.removeClass（'show'）.addClass（'hide'）；
计数=计数+1；
//警报（计数）；
var$currQuestion=$（'.问题：第n个子项（'+count+'））；
$currQuestion.removeClass（'hide'）.addClass（'show'）；
});
})；

.hide{
显示：无；
}
.表演{
显示：块；
背景：红色；
}

问题1

问题2

问题3

您是否与该HTML绑定？是的。当页面加载时，只有第一个问题会出现，当我点击“下一步”时，第二个问题会出现在第一个问题出现时的同一位置。我理解您的要求，但使用该HTML并不那么容易。而且，在我看来，这有点可怕，这可能是一个纯粹的问题虽然是个人风格的问题。你解释得很好，谢谢。但我无法实现。我的表单一次应该只有一个问题。初始页面只有一个问题，当我点击下一个时，下一个问题应该出现在同一个地方。希望我说得清楚。好的，我对HTML做了很多更改。我删除了ID并使用带有“.question”的类。这将允许您拥有所有问题的完整列表，当用户单击“下一步”时，它将显示下一个问题。隐藏功能使元素显示为无，显示功能使元素显示为块。如果您有任何问题，请告诉我！谢谢。它成功了。感谢所有帮助我的人。我从虽然我同意你的观点，但你可能需要花时间解释为什么代码“标记不正确”，以便OP可以学到一些东西。