在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>

jQuery的

$(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類。 在測試之前，將相同的類添加到所有下一個按鈕。

Answer 2

您需要指定.hideShow的當前塊，否則它將打開所有塊。

使用$(this).parent() ，這樣您可以引用next的block元素並獲取下一個hideShow塊。

這是經過更正的jsfiddle： https ://jsfiddle.net/znfeq3ck/