如何将数组的元素放在单独的div中的数组内的对象中？

Question

我想动态地将数组的元素放在单独的div中。 该数组位于数组内的对象内。 我想在不同的div中显示options属性的每个值。 我怎样才能通过javascript实现这一目标？ 谢谢你的大力帮助。

 var antonyms = [

 {
   question: "soft",
   options: ["dark", "white", "heavy", "hard", "down", "pretty", 
   "butter", "cotton"],
   answer: "hard"

  } ]


var x = "";

var i = 0;

function elements() {

if (i < antonyms.length) {

x += '<div class=option>' + antonyms[i].options.join(" ") + '</div>';

document.getElementById('container').innerHTML = x;

 i++;

    }

    x = "";

   }

elements();

Answer 1

您可以使用循环为每个数组元素创建一个<div>元素，而不是调用join()将所有数组元素拼接在一个字符串中。 我建议你看一下数组的map()函数。

Answer 2

我希望下一个代码可以帮助你，基本上我假设你有一个带有问题objects的外部数组 ，并且对于每个代码，你需要生成一个HTML结构。 因此，我将定义一个方法，它接受一个问题对象并生成相关的HTML结构，然后您可以为每个问题或特定问题调用该方法。

 var antonyms = [ { question: "soft", options: ["dark", "white", "heavy", "hard", "down", "pretty", "butter", "cotton"], answer: "hard" }, { question: "test", options: ["one", "two"], answer: "two" } ]; // Define a method that generate the HTML for one question. function getQuestionHtml(q) { let qHtml = "<h2>" + q.question + " options:</h2>"; qHtml += q.options.map(o => '<div class="option">' + o + '</div>').join(""); return qHtml; } // Start showing the first question. Click event will show next question. let container = document.getElementById("container"); let button = document.getElementById("btnNext"); let qIdx = 0; container.innerHTML = getQuestionHtml(antonyms[qIdx]); button.addEventListener("click", function() { qIdx += 1; if (qIdx < antonyms.length) container.innerHTML = getQuestionHtml(antonyms[qIdx]); else button.disabled = true; }); 

 .option { border: 1px solid gray; background-color: skyblue; } 

 <div id="container"> </div> <br> <button id="btnNext" type="button">Next</button>