Question

我有一个显示6行的页面，每行包含3个图像。每个图像都在上面放大。该页面显示了一个＆＃34;事件列表＆＃34;因此，它将在未来发展，并且每个新事件将成为列表中的第一个。

我认为如果我可以用通用图像替换图像的名称（image1，image1_small ...）并且有一个为图像分配正确名称的数组，那将更加实用。像这样的东西：

var imm1 = "ragaini2016_small.jpg";
var imm2 = "ragaini2016.jpg";
var imm3 = "possenti2016_small.jpg";
var imm4 = "possenti2016.jpg";  
......

但我不知道如何在<img src="xxx" ....

中编写代码

下面是其中一行的html代码：

<div class="row" style="margin-left:auto;margin-right:auto; width=100%">
        <div class="col-md-4" style="background-color:transparent;padding-top:1%;" >
        <p style="background-color:transparent;text-align:center;color:white;font-weight:bold;">7 Maggio 2016</p>
   <div class="ienlarger" style="margin: 0 auto; display:table;" >

21 Aprile 2016

19 Marzo 2016

谢谢你加布里埃尔

Answer 1

这是一个向HTML添加图像数组的小片段。我很确定这不是你所需要的，但这是一个开始。

＆＃13;

let arr = ['image1.jpg', 'image2.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg'],
  imageTags = [], divElt = document.getElementById('ienlarger');
arr.forEach(function(item, index) {
  img = document.createElement("img");
  img.src = item;
  divElt.appendChild(img);
});

＆＃13;

<div class="row" style="margin-left:auto;margin-right:auto; width=100%">
  <div class="col-md-4" style="background-color:transparent;padding-top:1%;">
    <p style="background-color:transparent;text-align:center;color:white;font-weight:bold;">7 Maggio 2016</p>
    <div id="ienlarger" class="ienlarger" style="margin: 0 auto; display:table;"></div>
  </div>
</div>

＆＃13;

Answer 2

以下是必需的步骤：

创建一个容器html div元素并给它一个id，比如id =“container”。

在javascript中创建图像名称数组。（数组不是变量）

var image_array = {"ragaini2016_small.jpg", "ragaini2016.jpg", ..... so on};

在javascript中，写一个for循环。在循环中，编写表行的代码。

var table_content = "";

for(var i=0; i<=3; i++) {
   table_content = '<img src = "' + image_array[i] + '" />'
}

image_array [i]会将数组中的图像名称替换为循环中的内容。

将“table_content”分配给容器的innerHTML。

document.getElementById("container").innerHTML = table_content;

从数组中替换图像名称

2 个答案: