我正在尝试在 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/
谢谢
最佳答案
你可以试试这个:
$( document ).on( "click", ".next", function() {
$(this).closest('.hideShow').hide().next().show();
});
此外,在您的 html 中,只有第一个 Next
按钮具有 .next
类。在测试之前将相同的类添加到所有下一个按钮。
关于javascript - 在 javascript 中进行测验,在 jquery 中隐藏一个并显示另一个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57893167/