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

for loop only showing last object from array

本文关键字：最后 一个对象 数组 循环 显示 for      更新时间：2023-09-26

嗨堆栈溢出社区。我是.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>");

    };
我

遇到的问题是，每次我单击 HTML 中的"#nextQ"按钮时，它总是显示数组中的最后一个项目，无论我有多少项目。它将直接从问题[0].问题到问题[2].问题和.选择，或问题[9].问题和.选择，例如，如果我有10个问题。

任何帮助将不胜感激！搜索栏中没有任何内容对我来说没有多大意义。

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

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

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

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>");
    };
});
我认为

您正在尝试从数组中弹出问题并显示它。

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>");

};

正如其中一条评论所说，在循环中，您用一个又一个的问题覆盖了显示部门的 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>");
}

正如您在小提琴中看到的那样，这是有效的。

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

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>");
    };
}());

这个在另一个小提琴中。

这两者都做了一个简化的假设，即当你从最后掉下来时，你会循环到列表的开头。 这么多是不合理的，你可能需要做一些稍微复杂一点的事情。

另请注意，没有真正的理由将current值与i变量分开。 我只是觉得懒惰。

我认为您每次使用$("#quiz"(替换问题时都会替换问题.html你应该使用jquery的追加函数来查看所有问题

相关文章：