从div ID获取所有图像并添加链接

时间:2011-07-11 23:32:52

标签: javascript innerhtml

我在构建一个从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> 

提前谢谢! 问候。

3 个答案:

答案 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)

编辑2

请注意,与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中的图片。