Question

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

提前谢谢！问候。

Answer 1

您在每个循环中分配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>";

Answer 2

嗯......你实际上是在尝试从一个不存在的数组中获取一个对象属性：

var images = getDivId.getElementsByTagName("img").innerHTML;

应改为：

var images = getDivId.getElementsByTagName("img");

Answer 3

编辑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中的图片。

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

3 个答案:

编辑2

修改