Question

对于5个问题的多项选择测验，我有一个显示问题，创建四个列表项并在其中添加按钮的功能。

我需要在按钮中放入答案选择文本。我有一个包含5个数组的数组，每个数组包含4个答案选择字符串。我正在努力寻找正确的方法来做到这一点。我尝试过使用嵌套的if循环和foreach（）并将按钮textContent设置为项目，但似乎无法正常工作。我需要访问第一个内部数组中的4个项目，然后在每次迭代时移至下一个内部数组。

下面是到目前为止我正在使用的。


   var list = document.getElementById("list");
   var btn = document.getElementById("start");
   var question = document.getElementById("question")

   var questionArray = 
   [“Question 1”, 
   “Question 2“,
   “Question 3”,
   “Question 4“,
   “Question 5“];

   var answerArray = 
   [[“answer”, "answer", "answer", "answer"], 
   ["answer", "answer", "answer", "answer"],
   ["answer", "answer", "answer", "answer"],
   ["answer", "answer", "answer", "answer"],
   ["answer", "answer", "answer", "answer"]];


function displayQuestion() {
   for (var i=0; i < questionArray.length; i++) {
       question.textContent = questionArray[i];
       createListItems();
       return;
   }
}

function createListItems() {
   for (var j=0; j < answerArray[0].length; j++) {
       var listItem = document.createElement("li");
       list.appendChild(listItem);
       var answerButton = document.createElement("button");
       listItem.appendChild(answerButton);
   }

}

Answer 1

您可以实现以下目标：

function displayQuestion() {
   for (var i = 0; i < questionArray.length; i++) {
      (function(idx) {
         question.textContent = questionArray[idx];
         createListItems(idx);
      })(i);
   }
}

function createListItems(idx) {
   for (var j=0; j < answerArray[idx].length; j++) {
       var listItem = document.createElement("li");
       listItem.appendChild(document.createTextNode(answerArray[idx]));           
       var answerButton = document.createElement("button");
       listItem.appendChild(answerButton);
       list.appendChild(listItem);
   }
}

如何访问二维数组中的项目？

1 个答案: