我有一个有四个问题的页面。用户可以通过单击是或否来回答问题。但是,在他们能够打开“摘要”部分之前,我想要求用户选择四个答案中的每一个。有没有办法用js验证这个?我的代码示例如下:
<div id="mainContainer">
<div class="question">
<ul class="questions">
<li><a href="javascript:void(0);" class="answer yes"> Yes</a><span class="pointer"></span></li>
li><a href="javascript:void(0);" class="answer no"> No</a><span class="pointer"> </span></li>
</ul>
<p class="query">When answering this question you feel confused.</p>
<div class="result yes feedback">
<a class="close_btn" href="javascript:void(0);">X</a>
<p class="advice"><span class="expert">Incorrect</span><p>When answering this question you feel smart.</p>
</div>
<div class="result no feedback">
<a class="close_btn" href="javascript:void(0);">X</a>
<p class="advice"><span class="expert">Correct</span><p>When answering this question your brain hurts.</p>
</div>
</div>
<div class="question summary">
<ul>
<li><a href="javascript:void(0);" class="answer yes summary"><h3>Summary</h3></a></li>
</ul>
<div class="result yes feedback">
<a class="close_btn" href="javascript:void(0);">X</a>
<p class="advice"><span class="expert">Scenario 1 Summary</span><p>When answering questions sometimes we feel smart, confused, and have brains that hurt.</p>
</div>
</div>
<div class="btn"><a href="#vulnerable" class="subNav">Next Scenario</a></div>
</div>
$('#mainContainer').on('click', '.answer', function () {
var $this = $(this),
$thisListItem = $this.parent(),
$thisQuestion = $this.parents('.question'),
thisAnswerClass = $this.attr('class').split(' ')[1],
$allAnswers = $this.parents('.question').children('div'),
$thisAnswer = $allAnswers.filter('.' + thisAnswerClass);
if($thisAnswer.is(':visible')){
return;
} else {
$allAnswers.slideUp('slow', function () {
$thisQuestion.find('.open').removeClass('open');
});
$thisAnswer.slideDown('slow', function () {
$thisListItem.addClass('open');
if ($thisAnswer.find('.advice').length === 1) {
$thisAnswer.find('.advice').slideDown('fast');
};
});
}
})
.on('click', '.close_btn', function () {
$(this).parent().slideUp('slow');
$(this).parents('.question').find('.open').removeClass('open');
});