Question

我已经四处搜索，发现我的问题没有纯粹的js解决方案可以应用于我的代码。这是一个打印图像数组的脚本，但现在只打印1个数组。 html中的相关代码：

<div id="imgViewer"></div>
<script>
var imgViewerImages = ['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];
</script>
<script src="services/imgViewer.js"></script>

在JS中：

function imgViewerPrinter(){
    var imgViewerTarget = document.getElementById('imgViewer');
    imgViewerImages.toString();

    for (var i=0;i<imgViewerImages.length;i++){
        imgViewerTarget.innerHTML = '<img src="' + imgViewerImages[i] + '">';
    }
}

window.onload = imgViewerPrinter();

我仍然是JS的菜鸟，所以我要求你的耐心。

提前致谢

Answer 1

尝试：

imgViewerTarget.innerHTML += "<img src="' + imgViewerImages[i] + '">";

Answer 2

如果你想要打印出一系列图像，你不应该在循环中使用你的HTML代码，例如我的图像编号;

 for (var i=0;i<imgViewerImages.length;i++){
var imgViewerImages = ['img/imgViewer/' + [i] + '.png'];
  }

Answer 3

尝试类似这样的事情，因为你的代码一次又一次地重写innerHTML，所以你获得了最后一次迭代的值。

而不是在每个循环中操作DOM，下面的代码只会操作你的DOM一次。

function imgViewerPrinter(){
    var imgViewerTarget = document.getElementById('imgViewer');

    var imgViewerImages_length = imgViewerImages.length;
    var image = '';
    for (var i=0;i<imgViewerImages_length;i++){
        image += '<img src="' + imgViewerImages[i] + '">';
    }
    imgViewerTarget.innerHTML = image;
}

Answer 4

试试这个优化的溶液。

 var imgViewerImages =['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];

    function imgViewerPrinter(){

        var imgList=[];
        for (var i=0;i<imgViewerImages.length;i++){
            imgList.push('<img src="' + imgViewerImages[i] + '" />');
        }
         var imgViewerTarget = document.getElementById('imgViewer');
         imgViewerTarget.innerHTML = imgList.join('');
    }

    window.onload = imgViewerPrinter();

我没有打印数组的Javascript

4 个答案: