时间戳

首页 > 解决方案 > javascript中的测验，隐藏一个并在jquery中显示另一个问题

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

问题描述

我正在尝试在 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/

谢谢

标签： javascriptjquery

解决方案

你可以试试这个：

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

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

推荐阅读