CODE

Question

我是JavaScript的新手，我需要将它与bootstrap一起用于我自己的网页。我现在的问题是如何制作一个循环，以便图片名称（存储为数组）可以出现在HTML代码的正确位置，这样我就不必复制每张图片的代码块。

例如：

<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="01.jpg">
    </div>
</div>


<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="01.jpg">
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="02.jpg">
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="03.jpg">
    </div>
</div>

正如我们在这里看到的唯一不同的文本是src。如何将名称（路径）存储在数组中并创建一个更改src属性的循环？谢谢！

Answer 1

试试此演示：http://jsbin.com/pinoxeqapi/1/edit?html,output

我认为这就是你要找的东西。

CODE

$(function () {
   var images = ["01.jpg", "01.jpg", "02.jpg", "03.jpg"];

   $.each(images, function (index, element) {
     var imgContainer = "<div class='row'><div class='col-md-3 col-xs-6 portfolio-item><img class='img-responsive' src='" + element + "'></div></div>";
      $("body").append(imgContainer);
   });
});

Answer 2

首先包括JQuery（如果没有）

<script>
var srcArray = ['01.jpg', '02.jpg', '03.jpg', '04.jpg'];

$(document).ready(function () {
     for (var i = 0; i < srcArray.length; i++) {
        $('div.row img.img-responsive').eq(i).attr("src", srcArray[i]);
     }

});
</script>

Answer 3

您可以使用存储在HTML中的模板，然后使用图像源数组生成实际元素。像John Resig's micro-templates之类的东西可以达到这个目的。

<script type="text/template" id="img-tmpl">
    <div class="row">
        <div class="col-md-3 col-xs-6 portfolio-item>
            <img class="img-responsive" src="<%= src %>">
        </div>
    </div>
</script>

Answer 4

我建议使用其他一些答案中描述的模板框架之一。如果您有兴趣了解如何在纯JS中实现它：

＆＃13;

var temp = document.querySelector('#portfolio-item-template');
['01.jpg', '02.jpg', '03.jpg', '04.jpg'].forEach(function(src) {
  temp.content.querySelector(".img-responsive").src = src;
  var newImg = document.importNode(temp.content, true);
  document.querySelector('#insertion-point').appendChild(newImg);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="portfolio-item-template">
  <div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
      <img class="img-responsive">
    </div>
  </div>
</template>

<div id="insertion-point">
</div>

＆＃13;

html标签中的Javascript以避免重复

4 个答案:

CODE