Question

我创建了一个小脚本来计算我上传/插入到我的html源代码中的图像。插入图像后，脚本为这些图像创建div容器。如果我给了三个图像，那么脚本将创建三个带有类名等的div。我有一个带有该类名的css规则。这是在容器中的任何图像之前创建的。一切正常但我无法将这些新图像附加到新创建的div。有没有办法只使用JavaScript？

这是一段代码：

if (document.getElementsByClassName("Multimedia")[0].getElementsByTagName("IMG")) {
    total_number_of_images = document.getElementsByClassName("Multimedia")[0].getElementsByTagName("IMG").length;
    for (i = 0; i < total_number_of_images; i = i + 1) {
        document.getElementsByTagName("IMG")[i].className = "Image_clip";
        child = document.getElementsByTagName("IMG")[i];
        image_container = document.createElement("DIV");
        image_container.className = "Image_container_div";
        document.getElementsByClassName("Multimedia")[0].appendChild(image_container);
        document.getElementsByTagName("IMG")[i].style.opacity = "0.8";
    }

}

我试过像这样的somthenig：

image_container.appendChild(child);

但是后来我只能将两张图片放到容器中......我的第三张图片已经出来，而且没有className。如果没有此代码，我会为每个图片获得className

Answer 1

您应该缓存对元素的引用，而不是在循环中查询DOM。如果我理解正确，您的代码应该类似于以下内容，以便将每个图像包装在容器<div>中：

var container = document.getElementsByClassName("multimedia")[0];
 // if there is only one match, use an id instead ------------^ ?
var images = container.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  var img = images[i];
  img.className = "imageClip";
  img.style.opacity = "0.8"; // Why not define this in imageClip class ..?
  imageContainer = document.createElement("div");
  imageContainer.className = "imageContainer";
  imageContainer.appendChild(img);
  container.appendChild(imageContainer);
}

Answer 2

我得到雅虎答案。 YaYox发布：http://jsfiddle.net/ffxad4bq/4

function myFunction() {
    var multimedia = document.getElementsByClassName("Multimedia")[0]
    var imgs = multimedia.getElementsByTagName("IMG");
    for (var i = 0; i < imgs.length; i++) {

        imgs[0].className = "Image_clip";
        imgs[0].style.opacity = "0.3";

        multimedia.innerHTML += '<div class="Image_container_div">'+imgs[0].outerHTML+'</div>';
        imgs[0].remove()

    }

}

我意识到问题是什么。我不应该通过图像看到它。只需将其保持为零，因为当循环开始时，代码一次附加一个图像。当第二个循环开始时，我不再有3个图像，而是两个，这就是为什么一个图像总是保持不动，因为循环变为三次。

仅使用javascript将多个图片附加到div

2 个答案: