Question

Hi Stack Overflow社区。我是.js和jQuery的初学者，我在这里讨厌我的大脑。

我创建了一个对象数组

var questions = [  

{
    question: "What is Capital of Canada",
    choices:["Ottawa","Toronto","Montreal","Vancouver"],
},

{
    question: "What is the capital of France",
    choices:["Paris","Lille","Bordeaux","Lyon"],
},
{
    question: "What is the capital of Brazil",
    choices:["Curitiba","Rio de Janeiro","Sao Paolo","Brasilia"],
},

我已经创建了“点击”按钮。我按钮的处理程序

$("#nextQ").bind('click', displayQuestion);

最后，我用for循环创建了我的函数，它应该循环我的问题

function displayQuestion() {

    for (var i = 0; i < questions.length; i++) {

        $("#quiz").html("<h2>" + questions[i].question +"</h2>" 
            + "<ol id=question type=A> <li id=choice1>" 
            + questions[i].choices[0] + "</li>" 
            + "<li id=choice2>" + questions[i].choices[1] 
            + "</li>" + "<li id=choice3>"
            + questions[i].choices[2] + "</li>" 
            + "<li id=choice4>" 
            + questions[i].choices[3] + "</li> </ol>");


    };

我遇到的问题是每次点击＆＃34;＃nextQ＆＃34;在我的HTML中，它始终显示我的数组中的最后一项，无论我有多少项。如果我有10个问题，它将直接从问题[0]。问题到问题[2]。问题和.choices，或问题[9]。问题和.choices。

非常感谢任何帮助！搜索栏中没有任何内容对我有意义。

Answer 1

假设您只想一次显示一个问题，您没有理由使用任何类型的循环。这样的事情可能更符合你的目标：

var i = 0;
function displayQuestion() {

    $("#quiz").html("<h2>" + questions[i].question +"</h2>" 
        + "<ol id=question type=A> <li id=choice1>" 
        + questions[i].choices[0] + "</li>" 
        + "<li id=choice2>" + questions[i].choices[1] 
        + "</li>" + "<li id=choice3>"
        + questions[i].choices[2] + "</li>" 
        + "<li id=choice4>" 
        + questions[i].choices[3] + "</li> </ol>");

    i++;
});

如果您尝试同时显示所有问题，那么您的问题是，对于循环的每次迭代，您都需要设置html #quiz 1}}而不是添加它。这将在屏幕上显示所有问题：

function displayQuestion() {

    var $q = $("#quiz");

    for (var i = 0; i < questions.length; i++) {
        $q.append("<h2>" + questions[i].question +"</h2>" 
            + "<ol id=question type=A> <li id=choice1>" 
            + questions[i].choices[0] + "</li>" 
            + "<li id=choice2>" + questions[i].choices[1] 
            + "</li>" + "<li id=choice3>"
            + questions[i].choices[2] + "</li>" 
            + "<li id=choice4>" 
            + questions[i].choices[3] + "</li> </ol>");
    };
});

Answer 2

我认为您正试图从数组中弹出问题并显示它。

function displayQuestion() {
    var nextQuestion= questions.pop();

    $("#quiz").html("<h2>" + nextQuestion.question +"</h2>" 
        + "<ol id=question type=A> <li id=choice1>" 
        + nextQuestion.choices[0] + "</li>" 
        + "<li id=choice2>" + nextQuestion.choices[1] 
        + "</li>" + "<li id=choice3>"
        + nextQuestion.choices[2] + "</li>" 
        + "<li id=choice4>" 
        + nextQuestion.choices[3] + "</li> </ol>");


};

或者如果你想在数组中保留问题并增加问题索引以获得下一个问题：

var i = 0;
function displayQuestion() {
    ++i;

    $("#quiz").html("<h2>" + questions[i].question +"</h2>" 
        + "<ol id=question type=A> <li id=choice1>" 
        + questions[i].choices[0] + "</li>" 
        + "<li id=choice2>" + questions[i].choices[1] 
        + "</li>" + "<li id=choice3>"
        + questions[i].choices[2] + "</li>" 
        + "<li id=choice4>" 
        + questions[i].choices[3] + "</li> </ol>");


};

Answer 3

正如其中一条评论所说，在循环中，你用一个又一个问题覆盖你的显示部门的HTML。因此，每按一下按钮，您就可以使用每个问题快速重写该部分。

但是，我假设您的要求只是一次显示一个问题。这意味着您需要在某处跟踪当前的问题。这是一个天真的版本：

var current = -1;

function displayQuestion() {
    current += 1;
    var i = current % questions.length;

    $("#quiz").html("<h2>" + questions[i].question +"</h2>" 
        + "<ol id=question type=A> <li id=choice1>" 
        + questions[i].choices[0] + "</li>" 
        + "<li id=choice2>" + questions[i].choices[1] 
        + "</li>" + "<li id=choice3>"
        + questions[i].choices[2] + "</li>" 
        + "<li id=choice4>" 
        + questions[i].choices[3] + "</li> </ol>");
}

这可以在 a fiddle 中看到。

但我称之为天真，因为它引入了一个全局状态变量，这几乎不是一个好主意。相反，这个版本将该状态封装在函数的闭包中：

var displayQuestion = (function() {
    var current = -1;
    return function displayQuestion() {
        current += 1;
        var i = current % questions.length;

        $("#quiz").html("<h2>" + questions[i].question +"</h2>" 
            + "<ol id=question type=A> <li id=choice1>" 
            + questions[i].choices[0] + "</li>" 
            + "<li id=choice2>" + questions[i].choices[1] 
            + "</li>" + "<li id=choice3>"
            + questions[i].choices[2] + "</li>" 
            + "<li id=choice4>" 
            + questions[i].choices[3] + "</li> </ol>");
    };
}());

此内容位于 another fiddle 。

这两个都做了简化的假设，当你从结束时，你将循环到列表的开头。许多不合理，你可能需要做一些稍微复杂的事情。

另请注意，没有确切的理由将current值与i变量分开。我只是感到懒惰。

Answer 4

我认为你每次使用$（＆＃34;＃quiz＆＃34;）替换问题.html 您应该使用jquery的append函数来查看所有问题

for循环仅显示数组中的最后一个对象

4 个答案: