创建使用用于循环使用从阵列的数据的多个格

Question

我想分配数组元素，以多个div也有使用循环在他们的图像标签。阵列由图像路径的。

var img_list = ["one.png", "two.png", "three.png", "four.png"];

通过使用上述阵列我要创建HTML以下结构。所有div应该是内部“外”分区与数据滑动属性，是没有“png格式”。

<div id="outer">
  <div class="slide" data-slide="one"><img src="Images/one.png" /></div>
  <div class="slide" data-slide="two"><img src="Images/two.png" /></div>
  <div class="slide" data-slide="three"><img src="Images/three.png" /></div>
  <div class="slide" data-slide="four"><img src="Images/four.png" /></div>
</div>

这是我写的：

for (var i=0; i < img_list.length; i++){
    var container = document.getElementById("outer").innerHTML;
    var new_card = "<div class=\"slide\" data-slide=\'" + img_list[i] + "\'><img src=\'Images/" + img_list[i] + "\' /></div>";
    document.getElementById("outer").innerHTML = new_card;
}

但只显示最后一张图像。请帮忙。

Answer 1

在问题的代码通过设置.innerHTML在阵列的每次迭代到for覆盖.innerHTML循环内的new_card。您也可以替换.insertAdjacentHTML()设置.innerHTML。此外，替代const为var防止new_card被全局定义。包括alt元素<img>属性。您可以在点字符.split() img_list[0] .，.shift()所得数组中的字符串.设置img_list[i]属性值data-*之前得到的字。

const img_list = ["one.png", "two.png", "three.png", "four.png"];

for (let i = 0, container = document.getElementById("outer"); i < img_list.length; i++) {
  const src = img_list[i];
  const data = src.split(".").shift();
  const new_card = `<div class="slide" data-slide="${data}"><img src="Images/${src}" alt="${data}"/></div>`;
  container.insertAdjacentHTML("beforeend", new_card);
}

<div id="outer"></div>

Answer 2

每一次你的for循环运行时，它正在取代“外”分区与当前IMG HTML中的HTML元素。

为了有其追加，你可以简单地改变document.getElementById("outer").innerHTML = new_card;到document.getElementById("outer").innerHTML += new_card;使得元件附加，而不是覆盖。

Answer 3

您正在改变，你需要添加到它的innerHTML。并使用Template literals生成HTML字符串

var img_list = ["one.png", "two.png", "three.png", "four.png"];
const outer = document.getElementById('outer')
img_list.forEach(img => {
  outer.innerHTML += `<div class="slider" data-slide="${img.split('.')[0]}"><img src="Images/${img}" /></div>` 
})
console.log(outer.innerHTML)

<div id="outer">
</div>

Answer 4

@ Tony7931，请更换为与下面的代码回路的最后一行：

document.getElementById("outer").innerHTML += new_card;

Answer 5

你就要成功了，但每次都重写滑块DIV时间。

你只需要在分配部分添加+。如下图所示。

document.getElementById("outer").innerHTML += new_card;

下面是完整的例子：

var img_list = ["one.png", "two.png", "three.png", "four.png"];

for (var i=0; i < img_list.length; i++){
    var container = document.getElementById("outer").innerHTML;
    var new_card = "<div class=\"slide\" data-slide=\'" + img_list[i].split('.')[0] + "\'><img src=\'Images/" + img_list[i] + "\' /></div>";
    document.getElementById("outer").innerHTML += new_card;
}

<div id="outer"></div>

Answer 6

你也可以使用map阵列的方法和Element.innerHTML获得所需要的结果。

地图（）方法创建与主叫呼叫阵列中的每个元件上的提供功能的结果的新的数组。

---

演示

const img_list = ["one.png", "two.png", "three.png", "four.png"];

let result = img_list.map((v, i) => `<div class="slide" data-slide="${v.split(".")[0]}"><img src="Images/${v}"/>${i+1}</div>`).join('');

document.getElementById('outer').innerHTML = result;

<div id="outer"></div>

Answer 7

1. 您可以在循环外部声明变量并重新使用它们。这是更有效的。
2. 常量，让优于VAR。你只需要设置一次容器，以便它可以是常量。 new_card应该让因为你需要指定它不止一次。
3. 您也可以使用模板字符串，所以你并不需要所有的反斜杠。
4. 及如何使用foreach会使代码更加清晰：

const img_list = ["one.png", "two.png", "three.png", "four.png"];
const container = document.getElementById("outer")
let new_card;
img_list.forEach(i => {
    new_card = `<div class=slide data-slide='${i.split(".")[0]}'><img src='Images/${i}'></div>`
    container.innerHTML += new_card;
})

    <div id="outer">
    </div>

或者，通过减少：

const img_list = ["one.png", "two.png", "three.png", "four.png"];
const container = document.getElementById("outer")
const reducer = (a, i) => a + `<div class=slide data-slide='${i.split(".")[0]}'><img src='Images/${i}'></div>`
container.innerHTML = img_list.reduce(reducer, '')

    <div id="outer">
    </div>