Javascript 测验未转换

Question

我正在尝试做一个测验，一次显示一个问题，当你回答它时，你就会转到下一个问题。我有一些基本标记，如下所示

<div id="quizzie">
    <div class="col-md-12 quiz-container current">
        <div class="col-md-6">
            <img src="../images/image.jpg">
        </div>
        <div class="col-md-6 extra">
            <ul class="quiz-step step1">
                <li class="question">
                    <div class="question-wrap">
                        <h3 class="question-title">Some Question:</h3>
                    </div>
                </li>
                <li class="quiz-answer low-value" data-quizIndex="2" data-number="1">
                    <div class="col-md-12 add-border add-spacing">
                        <div class="answer-wrap">
                            <p class="answer-text">This Thing</p>
                        </div>
                    </div>
                </li>
                <li class="quiz-answer high-value" data-quizIndex="4" data-number="1">
                    <div class="col-md-12 add-border add-spacing">
                        <div class="answer-wrap">
                            <p class="answer-text">That Thing</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-12 quiz-container">
        <div class="col-md-6">
            <img src="../images/image.jpg">
        </div>
        <div class="col-md-6 extra">
            <ul class="quiz-step step2">
                <li class="question">
                    <div class="question-wrap">
                        <h3 class="question-title">Some Question:</h3>
                    </div>
                </li>
                <li class="quiz-answer low-value" data-quizIndex="2" data-number="2">
                    <div class="col-md-12 add-border add-spacing">
                        <div class="answer-wrap">
                            <p class="answer-text">This Thing</p>
                        </div>
                    </div>
                </li>
                <li class="quiz-answer high-value" data-quizIndex="4" data-number="2">
                    <div class="col-md-12 add-border add-spacing">
                        <div class="answer-wrap">
                            <p class="answer-text">That Thing</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

然后，我确保显示第一个问题，并隐藏下一个问题

#quizzie .quiz-container {
    display: none;
    padding:0;
}
#quizzie .current {
    display: block;
}

现在我的Javascript代码是这样的

var quizSteps = $('#quizzie .quiz-step');

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

    ansOpts.each(function () {

        var eachOpt = $(this);
        eachOpt[0].addEventListener('click', check, false);
        function check() {
            var $this = $(this),
                value = $this.attr('data-quizIndex'),
                answerScore = parseInt(value);

            if (currentStep.children('.active').length > 0) {
                var wasActive = currentStep.children('.active'),
                    oldScoreValue = wasActive.attr('data-quizIndex'),
                    oldScore = parseInt(oldScoreValue);
                currentStep.children('.active').removeClass('active');
                $this.addClass('active');

            } else {
                $this.addClass('active');
                updateStep(currentStep);
            }
        }
    });
});

function updateStep(currentStep) {
    if(currentStep.hasClass('current')){
        currentStep.removeClass('current');
        currentStep.next().addClass('current');
    }
}

现在似乎正确设置了事件类，但它没有正确设置当前类，这意味着我总是陷入问题一。我怎样才能让它进入下一个问题？

谢谢

Answer 1

您应该在“.quiz-container”元素而不是“.quiz-step”元素上切换当前类。

Js fiddle