Javascript：使用循环用图像的 URL 填充数组答案

【问题标题】：Javascript: Using Loop to Fill Array with URL's for ImagesJavascript：使用循环用图像的 URL 填充数组
【发布时间】：2017-08-06 14:27:50
【问题描述】：

我想显示本地文件夹中的图像列表。我想我应该去图书馆看看一本 JavaScript 书，因为我的理解已经生疏了。

我想要完成的事情：
1. 用每个图像文件的所有 URL 填充数组
2. 不要编写所有这些 img 标签，而是遍历数组并将 img 标签附加到父元素。

我一直在草率地处理这个问题。任何人都可以帮忙吗？（顺便说一句，脚本标签包含的代码，就我所知，什么都不做）。

<!DOCTYPE html>
<html>
<head>
<title> Quick View Gallery </title> 

<script>
var maxPages = 23;
var arr = [];
for (var i = 1; i <= maxPages; i++) {
arr.push(i);
}
</script>

<style>
    img {
        height: 100%;
        width: 100%;
        border: 1px solid #66ccff;
    } 
</style>
</head>
<body bgcolor="#333333">

<div id="comicPages">
    <img src="1.jpg"></img> <p>
    <img src="2.jpg"></img> <br>
    <img src="3.jpg"></img> <br>
    <img src="4.jpg"></img> <br>
    <img src="5.jpg"></img> <br>
    <img src="6.jpg"></img> <br>
    <img src="7.jpg"></img> <br>
    <img src="8.jpg"></img> <br>
    <img src="9.jpg"></img> <br>
    <img src="10.jpg"></img> <br>
    <img src="11.jpg"></img> <br>
    <img src="12.jpg"></img> <br>
    <img src="13.jpg"></img> <br>
    <img src="14.jpg"></img> <br>
<img src="15.jpg"></img> <br>
<img src="16.jpg"></img> <br>
<img src="17.jpg"></img> <br>
<img src="18.jpg"></img> <br>
<img src="19.jpg"></img> <br>
<img src="20.jpg"></img> <br>
<img src="21.jpg"></img> <br>
<img src="22.jpg"></img> <br>
<img src="23.jpg"></img> <br>
</div>
</body>
</html>

【问题讨论】：

标签： javascript html arrays image for-loop

【解决方案1】：

如果您的文件名总是像 n+.jpg 您可以执行以下操作：

var container = document.getElementById('comicPages');

var images = 23;

for (var i = 0; i < images; i++) {
    // this will create and insert the corresponding image
    // new Image() creates a new <img> element. there is not much of a difference
    // to document.createElement('img'). additional you can call it as:
    // new Image(width, height) in case you already know its dimensions.
    var node = new Image();
    // additional you can also do the following as: node.src = i + '.jpg';
    node.setAttribute('src', i + '.jpg'); // but i like conventions
    container.appendChild(node);

    // this will ensure to insert a line break between each image
    if (i < images - 1) {
        container.appendChild(document.createElement('br'));
    }
}

请记住，您必须在将 <div id="comicPages"></div> 插入您的身体后运行它。

【讨论】：

我不得不选择这个，主要是因为你告诉我 html 元素的确切位置必须在哪里才能完成这项工作。我确信其他答案需要类似的东西，但我需要更多的学习时间来修复我的理解中的一些漏洞。

【解决方案2】：

这是一个非 JQuery 答案，因为该问题不需要它。

您可以浏览并为每个页面创建一个图像元素，然后将其附加到漫画书页面。例如：

var arr = [];
for (int i = 1; i <= 23; i++) {
    var ele = document.createElement("img");
    ele.src = i+".jpg";
    arr[i] = ele.src;
    document.getElementById("comicPages").appendChild(ele);
}

这是一个小提琴： https://jsfiddle.net/zwg5gLfu/1/

【讨论】：

【解决方案3】：

如果数组中有图像名称列表，则可以这样实现；

jQuery

var imageUrlCollection = new Array(); //image URL collection
var parentElement = $('#comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
       parentElement.append($('<img>',{id:item,src:imageUrlCollection[item]}));
}

原版 JS

var imageUrlCollection = new Array(); //image URL collection
var parentElement = document.getElementById('comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
    var image = document.createElement("img");
     image.id = item;
     image.className = "img";
    image.src = imageUrlCollection[item];   
    parentElement.appendChild(image);
}

【讨论】：

我在问题上看不到 jQuery 标签。

【解决方案4】：

您可以使用document.createElement、Node#cloneNode 和Node#appendChild 用漫画书页填充您的图库。您可能还希望将图像样式设置为 display: block，而不是使用换行符 (<br>) 来分隔它们。

var maxPages = 23
var comicPages = document.getElementById('comicPages')
var img = document.createElement('img')

for (var i = 1; i <= maxPages; i++) {
  img.src = i + '.jpg'
  img.alt = 'Comic Page (' + i + '/' + maxPages + ')'
  comicPages.appendChild(img.cloneNode())
}

<!DOCTYPE html>
<html>

<head>
  <title> Quick View Gallery </title>
  <style>
    #comicPages img {
      height: 100%;
      width: 100%;
      display: block;
      color: #fff;
      border: 1px solid #66ccff;
    }
  </style>
</head>

<body bgcolor="#333333">

  <div id="comicPages">
  </div>
</body>

</html>

【讨论】：

【解决方案5】：

这是最终代码的样子：

<!DOCTYPE html>
<html>
<head>
    <title> Quick View Comic Gallery </title>

<style>
    #comicPages img {
        height: 100%;
        width: 100%;
        display: block;
        border: 1px solid #66ccff;
    } 
</style>
</head>
<body bgcolor="#333333">

<div id="comicPages"></div>

<script>
    var container = document.getElementById('comicPages');
    var images = 23;
    for (var i = 0; i <= images; i++) {
        var node = new Image();
        node.setAttribute('src', i + '.jpg');
        container.appendChild(node);
    }
</script>

</body>

【讨论】：