Question

我正在尝试通过循环数组并将数据输入到我的HTML字符串来生成HTML内容。

我尝试过使用Stack Overflow中的以下答案（没有运气）： JavaScript closure inside loops – simple practical example

我看过的其他答案对于我想做的事情来说太复杂了。

这是我的原始代码：

    var staticOptions = [
  {
    name : "option1",
    id : "option1",
    img : "img/extras/360-chasis.jpg"
  },
  {
    name : "option2",
    id : "option2",
    img : "img/extras/lifing-eye.jpg"
  },
  {
    name : "option3",
    id : "option3",
    img : "img/extras/360-window.jpg"
  },
  {
    name : "option4",
    id : "option4",
    img : "img/extras/led-flood-light.jpg"
  },
  {
    name : "option5",
    id : "option5",
    img : "img/extras/360-canteen-light.jpg"
  }
];

for (var i = 0; i < staticOptions.length; i++ ) {
  var optionHtml = '<div class="form-check width30">'
                + '<label class="form-check-label" for="'
                + staticOptions[i].id
                + '">'
                + '<input class="form-check-input" id="'
                + staticOptions[i].id
                + '" type="checkbox">'
                + staticOptions[i].name
                + '<!--        <span class="indiv-price">£300</span>-->'
                + '</label>'
                + '  </div>'
                + '<div class="info-img hide"><img src="'
                + staticOptions[i].img
                + '"></div>';

  $("#bodyOptions").html(optionHtml);

};

此代码只显示我的数组的最后一项。但是，如果我使用alert方法输出html，它会按预期循环遍历数组中的所有五个对象。

阅读上面问题的最高投票回答提到“闭包”我试图使我的代码的答案适应但它没有输出任何东西（没有错误显示）：

function createfunc(i) {
    return function() { 

      var optionHtml = '<div class="form-check width30">'
                + '<label class="form-check-label" for="'
                + [i].id
                + '">'
                + '<input class="form-check-input" id="'
                + [i].id
                + '" type="checkbox">'
                + [i].name
                + '<!--        <span class="indiv-price">£300</span>-->'
                + '</label>'
                + '  </div>'
                + '<div class="info-img hide"><img src="'
                + [i].img
                + '"></div>';

    $("#bodyOptions").html(optionHtml);

    };
}

for (var i = 0; i < staticOptions.length; i++) {
    staticOptions[i] = createfunc(i);
}

总之，我想要做的就是创建五段HTML代码，从数组中输入每个实例的数据，然后用HTML将其写入页面。

提前致谢。

Answer 1

尝试：

$("#bodyOptions").html($("#bodyOptions").html() + optionHtml);

似乎您正在使用新选项替换整个#bodyOptions HTML，因此您需要做的是添加它已包含的内容。

循环仅显示数组的最后一个实例

1 个答案: