javascript 从 div ID 获取所有图像并添加链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6657940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get all images from a div ID and add links
提问by Breno
I am having some difficulties building a javascript that gets all the images from a div ID, and add a link to the big image on each of the thumbnails. Here is my code.
我在构建一个从 div ID 获取所有图像的 javascript 时遇到了一些困难，并在每个缩略图上添加了一个指向大图像的链接。这是我的代码。
<html>
<head>
<script>
function addGallery(){
var getDivId = document.getElementById("imgContainer");
var images = getDivId.getElementsByTagName("img").innerHTML;
for(var i=0; i<images.length; i++) {
getDivId.innerHtml = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
}
}
</script>
</head>
<body onload='addGallery()'>
<div id="imgContainer">
<img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
<img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
<img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
<img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
<img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
</div>
</body>
</html>
Thank you in advance! Regards.
先感谢您！问候。
回答by Chandu
You are assigning innerHTML in each loop without concatenating the existing HTML.
您在每个循环中分配 innerHTML 而不连接现有的 HTML。
Change:
改变：
getDivId.innerHTML = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
to
到
getDivId.innerHTML += "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
回答by John Green
Um... you're actually attempting to grab an object property from an array, which doesn't exist:
嗯...您实际上是在尝试从不存在的数组中获取对象属性：
var images = getDivId.getElementsByTagName("img").innerHTML;
Should be changed to:
应改为：
var images = getDivId.getElementsByTagName("img");
回答by RobG
Edit 2
编辑 2
Note than in IE, the image.srcvalue will be the full path of the image so you can't just prepend 'big/' to them.
请注意，在 IE 中，该image.src值将是图像的完整路径，因此您不能只在它们前面加上“big/”。
Edit
编辑
Oops, didn't see that you were adding A elements. Presumably you want the images to be inside the link. Instead of innerHTML, you can use DOM methods to creat the links:
糟糕，没有看到您添加了 A 元素。大概您希望图像位于链接内。除了innerHTML，您还可以使用DOM 方法来创建链接：
function addGallery(){
var getDivId = document.getElementById("imgContainer");
var path = '/images/galleries/';
var images = toArray(getDivId.getElementsByTagName("img"));
var oA = document.createElement('a');
var a, image, parent;
for(var i=0, iLen=images.length; i<iLen; i++) {
image = images[i];
a = oA.cloneNode(false);
a.href = image.src.replace(path, '/big' + path);
image.parentNode.appendChild(a);
a.appendChild(image);
}
}
function toArray(a) {
var result = [];
var i = a.length;
while (i--) {
result[i] = a[i];
}
return result;
}
There is also a document.images collectionthat is all the images in the document, but likely you only want those in the div.
还有一个document.images 集合，它包含文档中的所有图像，但您可能只需要 div 中的图像。
