简单的jQuery人格测验

Question

试图创建以下测试的简化版本：示例

enter code here

然而，在我的测验中，不管答案是什么，我不想计算分数，因为我只想一步步地完成测试，直到一个结果。注:这只是为了演示目的，这就是为什么问题没有加权，结果将永远是一样的。

以codepen示例中所做的操作为例，我尝试将其制作成这样，当用户单击一个输入时，它将进入下一个问题(通过添加类“current”)，直到最终到达结果部分为止。

到目前为止我拥有的。我们很感激你的帮助。

<div class="quiz-step step1 current">
        <h2 class="question-title">In your mind, what's most important?</h2>
        <ul class="no-bullet answers">
          <li><input type="radio" name="q1" value="" class="quiz-answer"><label>Ability to express oneself</label> </li>
          <li><input type="radio" name="q1" value="" class="quiz-answer"><label>Ability to look at the big picture</label> </li>
          <li><input type="radio" name="q1" value="" class="quiz-answer"><label>Drive and determination</label> </li>
          <li><input type="radio" name="q1" value="" class="quiz-answer"><label>Understand logic and science</label> </li>
        </ul>
      </div>

      <div class="quiz-step step2">
        <h2 class="question-title">What do you do best?</h2>
        <ul class="no-bullet answers">
          <li><input type="radio" name="q2" value="" class="quiz-answer"><label>Deal with stress</label> </li>
          <li><input type="radio" name="q2" value="" class="quiz-answer"><label>Effective time management</label> </li>
          <li><input type="radio" name="q2" value="" class="quiz-answer"><label>Use good judgment</label> </li>
          <li><input type="radio" name="q2" value="" class="quiz-answer"><label>Master interpersonal skills</label> </li>
        </ul>
      </div>

      <div class="quiz-step step3">
        <h2 class="question-title">What is the key to being a successful marketer?</h2>
        <ul class="no-bullet answers">
          <li><input type="radio" name="q3" value="" class="quiz-answer"><label>Knowledge of data and statistics</label> </li>
          <li><input type="radio" name="q3" value="" class="quiz-answer"><label>Logical thinking and problem solving</label> </li>
          <li><input type="radio" name="q3" value="" class="quiz-answer"><label>People person &ndash; interaction</label> </li>
          <li><input type="radio" name="q3" value="" class="quiz-answer"><label>Advising, Analying, Evaluating</label> </li>
        </ul>
      </div>

      <div id="results" class="quiz-step">
        <h2>result</h2>
      </div>

JS

    // global vars
    var quizSteps = $('.quiz-step');

    quizSteps.each(function() {
    var currentStep = $(this),
        ansOpts = currentStep.children('.quiz-answer');

    // for each step, add click listener
    // apply current active class
    ansOpts.each(function () {
        var eachOpt = $(this);
        eachOpt[0].addEventListener('click', check, false);
        function check() {
            var $this = $(this);
            // check to see if an answer was previously selected
            if (currentStep.children('.active').length > 0) {
                var wasActive = currentStep.children('.active');
                currentStep.children('.active').removeClass('active');
                $this.addClass('active');
            } else {
                $this.addClass('active');
                updateStep(currentStep);
            }
        }
    });
    });

// show current step/hide other steps
function updateStep(currentStep) {
    if(currentStep.hasClass('current')){
       currentStep.removeClass('current');
       currentStep.next().addClass('current');
    }
}

问题:当我选择一个无线电选项..。什么都没发生。它不会进入下一个“步骤”并显示该步骤的问题。

Answer 1

问题是下面一行：

ansOpts = currentStep.children('.quiz-answer');

您希望使用.find()而不是.children()，因为单选按钮元素不是step元素的直接子元素(也就是带有“quiz step”类的元素)。

您还可以删除对.each()的一个调用。我还建议使用jQuery .click()方法附加事件处理程序。看这个小提琴。