Question

我有3-4个答案选项的测验。如果每个问题的答案选择不同，如何检索它们？如果每个问题的选择数量相同，我就会知道代码。

我的代码：

    var answerArray = [
        ["black", "green", "yellow", "orange"], 
        ["big","small","long"], 
             ];

     function wait() {
     questionCounter < 1 ? 
        (questionCounter++,

        generateQuestions(),
              }; 

    function generateQuestions() {
        gameHTML = "<p class='text-center'>" + questionArray   [questionCounter] + "</p><p class='first-answer answer'>A. " + answerArray[questionCounter][0] + "</p><p class='answer'>B. "+answerArray[questionCounter][1]+"</p><p class='answer'>C. "+answerArray[questionCounter][2]+"</p><p class='answer'>D. "+answerArray[questionCounter][3]+"</p>";
$("#mainArea").html(gameHTML);
    };

Answer 1

您需要检查该问题的答案数组的长度，并遍历每个答案：

function generateQuestions() {
    const letters = ['A', 'B', 'C', 'D', 'E', 'F'];
    let gameHTML = "<p class='text-center'>;
    // iterate over each answer:
    answerArray[questionCounter].forEach((answer, index) => {
       const letter = letters[index] + '.';
       gameHTML += "<p class='answer'>" + letter + answer + "</p>"
    })
    $("#mainArea").html(gameHTML);
};

Answer 2

即使您知道数字，您可能也应该为此使用循环，只是为了使代码更具可维护性（例如，因此，如果数字发生变化，则不必重写逻辑。）

例如，您可以动态列出以下问题：

    const questionsArray = [
        ["What's my favorite color?"], 
        ["Describe my favorite toy."]
     ];

    const mainContainer = document.querySelector("#mainContainer");
    for(let i = 0; i < questionsArray.length; i++){

      // Makes a node to hold the question text
      let qTextNode = document.createTextNode(questionsArray[i]);

      // Makes a paragraph element to display the question text in
      let qParagraph = document.createElement("p");

      // Makes a div element to hold this question and all its possible answers
      let qContainer = document.createElement("div");

      // Gives the container some distinguishing attributes
      qContainer.classList.add("question");
      qContainer.id = (i + 1);

      // Puts the text in the paragraph
      qParagraph.appendChild(qTextNode);

      // Puts the paragraph in the container
      qContainer.appendChild(qParagraph);

      // Adds the container (and everything inside it) to the page
      mainContainer.appendChild(qContainer);

    }
    // Prints out the HTML we just created
    console.log(mainContainer.outerHTML.split("><").join(">\n<"));

<div id="mainContainer"></div>

运行该代码段时看起来可能并不多，但是正如您在控制台中看到的那样，现在您已经有了一个组织化的结构，可以将所有答案选择都保留在其中。以后可以使用javascript代码并在其中找到特定的元素您的网页以及CSS样式。

这是一个精采版本，为每个问题添加了答案文本。为此，我们需要在一个循环中进行循环（因为每个问题都有我们要动态添加的几个答案选项）：

const questionsArray = [
        ["What's my favorite color?"], 
        ["Describe my favorite toy."]
      ];
const answersArray = [
        ["black", "green", "yellow", "orange"], 
        ["big","small","long"], 
      ];

    // Stuff you saw in the previous snippet
    const mainContainer = document.querySelector("#mainContainer");
    for(let i = 0; i < questionsArray.length; i++){
      let qTextNode = document.createTextNode(questionsArray[i]);
      let qParagraph = document.createElement("p");
      let qContainer = document.createElement("div");
      qContainer.classList.add("question");
      qContainer.id = (i + 1);
      qParagraph.appendChild(qTextNode);
      qContainer.appendChild(qParagraph);
    
      // Makes an "ordered list" element to hold the choices
      let aList = document.createElement("ol");
      
      // Letters array will be used for item IDs
      let letters = "A,B,C,D,E,F,G,H,I,J".split(",");          

      // A nested loop to add the choices
      for(let j = 0; j < answersArray[i].length; j++){

        // Makes a textNode to hold the current choice
        let aTextNode = document.createTextNode(answersArray[i][j]);

        // Makes a list-item element to display the choice text in
        let aItem = document.createElement("li");

        // Gives the item an id using question number & answer letter
        aItem.id = (i + 1) + letters[j];

        // Puts the choice text in the item
        aItem.appendChild(aTextNode);

        // Puts the item in the list
        aList.appendChild(aItem);
      }

    // Done looping through choices, this adds the list to the question container
    qContainer.appendChild(aList);

  // And... we're back to stuff from the previous snippet
    mainContainer.appendChild(qContainer);
  }
  console.log(mainContainer.outerHTML.split("><").join(">\n<"));

/* The visible letters for the list items come from here, not from the script */
ol{ list-style-type: upper-alpha; }
.question{ margin-top: 25px; }

<div id="mainContainer"></div>

从二维数组中检索元素

2 个答案: