javascript - 在 javascript 中进行测验，在 jquery 中隐藏一个并显示另一个问题

Question

我正在尝试在 jquery 中进行测验，我需要隐藏问题并显示下一个问题。最后提交表格。

问题是，当我按下一步而不是一个一个地显示所有问题时。

有什么解决办法吗？

html

<form>


<div class="hideShow">

question a
<input type="radio" name="a" value="l"> answer a1
<input type="radio" name="a" value="d"> answer a2

<input type="button" class="next" value="Next">

</div>


<div class="hideShow">

question b
<input type="radio" name="b" value="l"> answer b1
<input type="radio" name="b" value="d"> answer b2

<input type="button" value="Preview">
<input type="button" value="Next">

</div>


<div class="hideShow">

question c
<input type="radio" name="c" value="l"> answer c1
<input type="radio" name="c" value="d"> answer c2

<input type="button" value="Preview">
<input type="button" value="Next">

</div>


<div class="hideShow">

question d
<input type="radio" name="d" value="l"> answer d1
<input type="radio" name="d" value="d"> answer d2

<input type="button" value="Preview">
<input type="button" value="Next">

</div>


<div class="hideShow">

question e
<input type="radio" name="e" value="l"> answer e1
<input type="radio" name="e" value="d"> answer e2

<input type="button" value="Preview">
<input type="submit" value="Show result">

</div>

</form>

j查询

$(function() {

    $(".hideShow").first().css("display", "block");


    $( document ).on( "click", ".next", function() {

    $(".hideShow").next().toggle();

    });
});

CSS:

.hideShow{
  display:none;
  border:1px solid #000;
  padding:10px;
  width:100%;
  margin-bottom:10px;
}

https://jsfiddle.net/adzh6t5e/

谢谢

Answer 1

你可以试试这个:

$( document ).on( "click", ".next", function() {
    $(this).closest('.hideShow').hide().next().show();
});

此外，在您的 html 中，只有第一个 Next 按钮具有 .next 类。在测试之前将相同的类添加到所有下一个按钮。