Question

尝试创建以下测验的简化版本：Example

enter code here

然而，对于我的测验，无论答案如何，我都不想计算分数，因为我只想逐步完成测验直到单个结果。注意：这仅用于演示目的，这就是为什么问题没有加权，结果总是相同的。

在codepen示例中完成了所做的工作，我尝试将其设置为当用户点击输入时它将进入下一个问题（通过添加类＆＃39;当前＆＃39;）直到最终达到结果部分。

What I have so far。感谢帮助。

<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');
    }
}

问题：当我选择一个无线电选项时......什么也没发生。它没有进入下一个步骤＆＃39;并显示该步骤的问题。

Answer 1

问题在于以下几行：

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

您希望使用.find()而不是.children()，因为单选按钮元素不是step元素的直接子元素（即带有＆＃34; quiz-step＆＃34的元素;类）。

你也可以摆脱对.each()的一次调用。我还建议使用jQuery .click()方法来附加事件处理程序。请参阅此jsfiddle。

简单的jQuery人格测验

1 个答案: