Javascript：使用循环填充数组和URL的图像
[英]Javascript: Using Loop to Fill Array with URL's for Images
问题描述
I wanted to display a list of images from a local folder. 
我想显示本地文件夹中的图像列表。 I guess I should check out a javascript book from the library as my understanding has become rusty. 我想我应该从图书馆查看一本javascript书，因为我的理解已经变得生疏了。
What I want to accomplish: 我想要完成的事情：
1. Fill an array with all of the URL's for each image file 1.使用每个图像文件的所有URL填充数组
2. Instead of writing all of those img tags, loop through the array and append img tags to parent elements. 2.而不是编写所有这些img标记，循环遍历数组并将img标记附加到父元素。
I keep approaching this in a sloppy manner. 我一直在以一种草率的方式接近这一点。 Can anyone help? 有人可以帮忙吗？ (By the way, the script tag contains code that does nothing as that is as far as I got). （顺便说一句，脚本标记包含的代码什么都不做，就像我得到的那样）。
<!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>
5 个解决方案
解决方案1
2 已采纳 2017-03-15 17:43:19
if your filenames are always like n+.jpg you could do the following: 如果您的文件名总是像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'));
}
}
keep in mind you have to run this after you inserted <div id="comicPages"></div> into your body. 请记住，在将<div id="comicPages"></div>插入您的身体后，您必须运行此功能。
解决方案2
1 2017-03-15 17:39:56
Here is a non JQuery answer as the question didn't call for it. 这是一个非JQuery答案，因为问题没有要求它。
You could go through and create an image element for every page and then append that to the comic book pages. 您可以浏览并为每个页面创建一个图像元素，然后将其附加到漫画书页面。 For example: 例如：
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);
}
Here is a fiddle: https://jsfiddle.net/zwg5gLfu/1/ 这是一个小提琴： https ： //jsfiddle.net/zwg5gLfu/1/
解决方案3
0 2017-03-15 17:35:45
If you have the list of images name in the array then you can achieve like this; 如果您在阵列中有图像名称列表，那么您可以实现这样的目标;
jQuery 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]}));
}
Vanilla JS 香草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);
}
解决方案4
0 2017-03-15 17:43:04
You can use document.createElement , Node#cloneNode , and Node#appendChild to populate your image gallery with comic book pages. 您可以使用document.createElement ， Node#cloneNode和Node#appendChild来使用漫画书页面填充图库。 You might also want to style your images as display: block instead of using line break elements ( <br> ) to separate them. 您可能还希望将图像设置为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
0 2017-03-20 22:39:34
Here is what the final code looks like: 这是最终代码的样子：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.