我正在遵循本指南:http://javascriptissexy.com/how-to-learn-javascript-properly/
目前,我正在尝试在该页面下方进一步详细介绍动态测验。思路:循环遍历所有问题,对数组中的每一个问题,新建一个表单,等待提交,处理提交的信息,继续下一个循环交互。我目前遇到了麻烦,因为我不知道如何暂停循环以等待提交表单。我该怎么做呢?请参阅下面的代码,以及具体的函数“presentQuestion()
”。
$(document).ready(function () {
var questionArray = [
{ question: "The Netherlands", choices: ["Amsterdam", "Monaco", "Chisinau"], correctAnswer: 0 },
{ question: "Austria", choices: ["Bern", "Vienna", "Copenhagen"], correctAnswer: 1 },
{ question: "Bulgaria", choices: ["Budapest", "Sofia", "Minsk"], correctAnswer: 1 },
{ question: "Sweden", choices: ["Stockholm", "Malmo", "Gothenburg"], correctAnswer: 0 },
{ question: "Latvia", choices: ["Vilnius", "Skopje", "Riga"], correctAnswer: 2 },
{ question: "Lithuania", choices: ["Riga", "Skopje", "Vilnius"], correctAnswer: 2 }];;
var score;
var questionField = $("#questionDiv");
var tallyField = $("#tallyDiv");
$("#startButton").on("click", function () {
resetTally();
askQuestions();
});
$("#answerButton").on("click", function () {
// The button from the generated question form.
// When pressed, call evaluateAnswer()
})
function askQuestions() {
for (var i = 0; i < questionArray.length; i++) {
questionField.empty();
presentQuestion(questionArray[i]);
}
}
function presentQuestion(q) {
questionField.append("What is the capital of " + q.question + "?");
questionField.append('<form method="POST">');
for (var i = 0; i < q.choices.length; i++) {
questionField.append(q.choices[i] + ' <input type="radio" name="answers" id="' + i + '"/></p>')
}
questionField.append('<input type="submit" id="answerButton" value="submit answer"/>');
// to do: code that pauses the askQuestions() for loop
}
function evaluateAnswer() {
// to do: take the submitted form info and evaluate the given answer. If correct, send
// feedback to updateTally()
}
function updateTally(givenAnswer) {
if (givenAnswer == true) {
// to do: increase score by 1, loop iteration ends and the next iteration
// in askQuestions() starts
}
else {
// Same, but with a score increase of 0
}
}
function resetTally() {
tallyField.text("Start answering!");
score = 0;
}
});
最佳答案
简短的回答是:
不要使用循环。使用 javascript 变量来跟踪用户当前所在的测验步骤。
长答案:
1) 创建一个新变量来跟踪测验步骤
$(document).ready(function () {
var quizstep = 0;
var questionArray = [
{ question: "The Netherlands", choices: ["Amsterdam", "Monaco", "Chisinau"], correctAnswer: 0 },
{ question: "Austria", choices: ["Bern", "Vienna", "Copenhagen"], correctAnswer: 1 },
{ question: "Bulgaria", choices: ["Budapest", "Sofia", "Minsk"], correctAnswer: 1 },
{ question: "Sweden", choices: ["Stockholm", "Malmo", "Gothenburg"], correctAnswer: 0 },
{ question: "Latvia", choices: ["Vilnius", "Skopje", "Riga"], correctAnswer: 2 },
{ question: "Lithuania", choices: ["Riga", "Skopje", "Vilnius"], correctAnswer: 2 }];
...
2) 将 askQuestions 函数替换为下面的函数。
...
function askQuestions() {
if(quizstep < questionArray.length)
{
questionField.empty();
presentQuestion(questionArray[quizstep]);
quizstep++;
}
}
...
关于Javascript/jQuery - 如何在提交表单之前暂停循环的执行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24927677/