0

我四处搜索，发现没有可以应用于我的代码的问题的纯 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 的菜鸟，所以我请求你的耐心。

提前致谢

4

4 回答 4

1

尝试 ：

imgViewerTarget.innerHTML += "<img src="' + imgViewerImages[i] + '">";
于 2013-10-25T11:25:50.837 回答
0

如果您想打印出一组图像，您不应该在循环中使用您的 HTML 代码，例如使 i 成为图像编号；

 for (var i=0;i<imgViewerImages.length;i++){
var imgViewerImages = ['img/imgViewer/' + [i] + '.png'];
  }
于 2013-10-25T11:26:35.743 回答
0

尝试这样的事情，因为你的代码一次又一次地重写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;
}
于 2013-10-25T11:26:58.817 回答
0

试试这个优化的解决方案。

 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();
于 2013-10-25T11:31:13.757 回答