Question

我是Javascript的新手，我试图用jQuery创建一个测验，但无法解决一个大问题。

当我点击“下一步”按钮时，所有答案都会被删除......我无法理解为什么。

PS：有人能给我反馈我的代码吗？

var questionsOrder = [];
var currentQuestion = 0;

var allQuestions = [{
    question: "1Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
}, {
    question: "1United Kingdom?",
    choices: ["David Camerfafaon", "Gordonfffa Brown", "Winstfafaon Churchill", "Tony fafaBlair"],
    correctAnswer: 0
}, {
    question: "2Who is Prime Ministerfsafasfa of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 1
}, {
    question: "3Who ifafa Minister of the Unitedsafafgdom?",
    choices: ["David Caafameron", "Goasfarown", "Wiasfsfa Churchill", "TofasfaBlair"],
    correctAnswer: 2
}, {
    question: "4Who is Prime Minister oafsafaf the United Kingdom?",
    choices: ["David asfsafCameron", "Gordon asfasf", "Winston Churchill", "Tony Blfsafasfair"],
    correctAnswer: 3
}];

var deleteOlQuestion = function () {
    $(".question").children().slideUp(function () {
        $(this).remove();
    });
    $(".answers").children().slideUp(function () {
        $(".answers").html(" ");
    });
    console.log("apagadas");
};

var shuffle = function (array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
};

var changeQuestion = function (question) {
    $(".question").slideDown(function () {
        $(".question").html("<h1>" + allQuestions[questionsOrder[currentQuestion]].question);
    });
    $(".answers").slideDown(function () {
        for (var i = 0; i < allQuestions[questionsOrder[currentQuestion]].choices.length; i++) {
            var question = allQuestions[questionsOrder[currentQuestion]].choices[i];
            if (i == allQuestions[questionsOrder[currentQuestion]].correctAnswer) {
                $(".answers").append('<input type="radio" name="question" class="question" value=' + i + '>' + question + "<br>");
            } else {
                $(".answers").append('<input type="radio" name="question" class="question" value="not">' + question + "<br>");
            }
        }
    });
};

$("#start").on("click", function () {
    for (var index = 0; index < allQuestions.length; index++) {
        questionsOrder.push(index);
    }
    shuffle(questionsOrder);
    changeQuestion(currentQuestion);
    $("#start").css("display", "none");
    $("#next").css("display", "inline");
});


$("#next").on("click", function () {
    if ($('.question').is(':checked')) {
        if (+$("input:checked").val() === allQuestions[questionsOrder[currentQuestion]].correctAnswer) {
            // blink blink verde
            currentQuestion++;
            deleteOlQuestion();
            changeQuestion(currentQuestion);
        } else {
            alert("Wrong");
        }
    }
});

.quizBody {
    text-align: center;
}
#next {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="quizBody">
    <div>
        <div class="question col-md-12"></div>
        <div class="answers col-md-12"></div>
        <div class="next col-md-12">
            <button type="button" id="start">Start</button>
            <button type="button" id="next">Next</button>
        </div>
    </div>
</div>

Answer 1

这看起来像是时间问题......我评论了这一行...

// $(".answers").html(" ");

...在deleteOlQuestion中。然后，将它放在changeQuestion中的for循环之前，它可以正常工作。

这应该为你提供足够的前进方向。

在这里 jsFiddle

尝试使用Javascript进行测验

1 个答案: