Question

我想使用for循环将数组元素分配给多个div，这些div中也具有图像标签。数组由图像路径组成。

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

通过使用以上数组，我必须在HTML结构下创建。所有div都应在“外部” div内，且具有data-slide属性，且不包含“ .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

每次for循环运行时，它都会用当前img html替换“外部” div中的html元素。

要添加它，您只需更改 document.getElementById("outer").innerHTML = new_card; 至 document.getElementById("outer").innerHTML += new_card;，以便元素被附加而不是被覆盖。

Answer 2

问题的代码通过在数组的每次迭代中将.innerHTML设置为for来覆盖.innerHTML循环中的new_card。您可以用.insertAdjacentHTML()代替设置.innerHTML。另外，用const代替var以防止全局定义new_card。在alt元素中包含<img>属性。您可以在点字符.split()上img_list[0] .，.shift()得到的数组在字符串.中的img_list[i]之前得到单词以设置{{ 1}}属性值。

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);
}

Answer 3

您正在更改需要添加的public boolean validateEmail(String input){ Pattern regex = Pattern.compile("[A-Za-z0-9._]+@[A-Za-z.]+"); Matcher idMatcher = regex.matcher(input); return idMatcher.matches(); }。并使用Template literals创建html字符串

innerHTML

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)

Answer 4

@ Tony7931，请使用以下代码替换for循环的最后一行：

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

Answer 5

您可以在循环外声明变量并重用它们。这样更有效。
const和let比var更可取。您只需要设置一次容器即可，它可以是const。应该使用new_card，因为您需要多次分配它。
您还可以使用模板字符串，因此不需要所有的反斜杠。
使用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>

或者，使用reduce：

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>

Answer 6

您几乎在那里，但是每次您覆盖滑块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 7

您还可以使用map数组方法和Element.innerHTML获得所需的结果。

map（）方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

演示

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>

使用for循环使用数组中的数据创建多个div

7 个答案: