javascript - 循环遍历图像数组并将内容推送到 html 标记中的 bootstraps 占位符

Question

我正在尝试构建一个函数，将图像数组的每个索引推送到我的 html 中的占位符中。因此，将图像数组的第一个索引放入占位符数组的第一个索引中，将第二个索引放入第二个索引中，依此类推。

当代码运行时，整个图像数组进入每个占位符，我错过了什么？

这是 JS 代码 =>

(function pushImages() {
  //array of images, better to store in an object ?
  var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg",       "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg","15030025.jpg"];

  for (var i = 0; i < images.length; i++){
    //push the image to the markUp
    var newImage = images[i];
    var markUp = ("<img src='img/" + newImage + "' class='img-responsive'</img>");
    // get bootstrap place holder where to insert.after
    var placeHolder = document.getElementsByClassName("col-md-3");
      for (var h = 0; h < placeHolder.length; h++) {
        //insert the markUp into the html after the placeholder
        placeHolder[h].insertAdjacentHTML("beforeend", markUp);
      };
  };
})();

这是来自 Codepen 的完整代码:

http://codepen.io/chem85/pen/grQJvP?editors=1111

我正在尝试将其构建为弹出图像库 slider 的更大应用程序的一部分。我可以使用 Jquery 插件，但我正在尝试学习自己做这件事的方法，而无需外部插件的帮助，仅使用 JS。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我改变了我的答案，这会用占位符填充父容器。我没有更改 CSS，因此您应该使其适合，但您可以看到如何做到这一点的原理。

HTML

<div class="container-fluid" id="photos-sections">
  <div class="row container" id="photos">

  </div>
</div>

JS

(function pushImages() {
                //array of images, better to store in an object ?
  var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg", "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg", "15030025.jpg"];
  var placeHolder = document.getElementsByClassName("container");
  for (var i = 0; i < images.length; i++) {

    var markUp = ("<div class='col-md-3'><img src='img/" + images[i] + "' class='img-responsive'</img></div>");
    placeHolder[0].insertAdjacentHTML("beforeend", markUp);

  };
})();

如果您只想将一个图像放入每个容器中，则无需循环遍历每个图像。您还应该根据图像数量生成占位符数量。