我在构建一个从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>
提前谢谢! 问候。
答案 0 :(得分:2)
您在每个循环中分配innerHTML而不连接现有的HTML。
变化:
getDivId.innerHTML = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
到
getDivId.innerHTML += "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
答案 1 :(得分:2)
嗯......你实际上是在尝试从一个不存在的数组中获取一个对象属性:
var images = getDivId.getElementsByTagName("img").innerHTML;
应改为:
var images = getDivId.getElementsByTagName("img");
答案 2 :(得分:0)
请注意,与IE相比,image.src
值将是图像的完整路径,因此您不能只为它们添加“big /”。
哎呀,没看到你在添加A元素。大概你想要图像在链接里面。您可以使用DOM方法创建链接,而不是innerHTML:
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;
}
文档中的所有图片都有document.images collection,但您可能只想要div中的图片。