在转到下一个链接之前,使用javascript验证所有访问过的选项

时间:2014-11-11 20:07:27

标签: javascript html validation

我有一个有四个问题的页面。用户可以通过单击是或否来回答问题。但是,在他们能够打开“摘要”部分之前,我想要求用户选择四个答案中的每一个。有没有办法用js验证这个?我的代码示例如下:

<div id="mainContainer">

<div class="question">
       <ul class="questions">
          <li><a href="javascript:void(0);" class="answer yes">&nbsp;Yes</a><span class="pointer"></span></li>
          li><a href="javascript:void(0);" class="answer no">&nbsp;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');
});

0 个答案:

没有答案