从数组数组创建html元素的简便方法

时间:2018-09-28 00:57:30

标签: javascript jquery html arrays

有没有办法使它变得更短?我列出了15个问题,需要让他们保持秩序。回答完每个问题后,转到nextQuestion函数。我想保持原样。我已经尝试过进行for循环,但是它总是使问题变得混乱。另外,我对此很陌生。任何帮助将不胜感激!

function questionContent() {    
    $("#gameShow").append("<p><strong>" + 
        questions[questionTracker].question + 
        "</p><p class='choices'>" + 
        questions[questionTracker].choices[0] + 
        "</p><p class='choices'>" + 
        questions[questionTracker].choices[1] + 
        "</p><p class='choices'>" + 
        questions[questionTracker].choices[2] + 
        "</p><p class='choices'>" + 
        questions[questionTracker].choices[3] + 
        "</strong></p>");
}

1 个答案:

答案 0 :(得分:1)

我不清楚您如何将一系列问题组合在一起,但是您的函数看起来像是要处理一个问题,并为该问题创建HTML以及一系列答案选项。

要简化问题中的函数,可以处理第一个question属性,然后遍历choices数组以添加要添加的其余html。类似于下面的示例(忽略strong标签会导致它们看起来位置奇怪,我不确定您真正想要它们的位置)。

您可以遍历主要问题数组并调用此函数(或仅创建一个函数即可完成所有操作),但很难确切说明在示例中没有更多代码或数据的情况下应该如何处理。

function questionContent(questions) {
  let question = '<p>' + questions[questionTracker].question + '</p>';
  for (let choice of questions[questionTracker].choices) {
    question += '<p class="choices">' + choice + '</p>';
  }
  $("#gameShow").append(question);
}