如何將數組的元素放在單獨的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>