for 循环和图像

Question

我需要一个 for 循环来调用图像。我知道如何通过数组调用图像，所以我设置了一个包含图像 link 的基本数组。我似乎无法让它工作。下面是相关的 javascript 和试图完成的图像

function icon(x) {
    var img = new Array();
    img[0] = {img:"img/icon1.gif"};
    var icon =" <img src='" + img[x].img + "'>";
    for(var i=30; i<31; i++) {
        document.getElementById("answer").innerHTML += icon + i;
    }
}

Answer 1

当用户点击link一次时，有一个for循环导致icon1图像显示30次。

好的 - 首先你的 for 循环只运行ning 一次 - 你将 i 初始化为 30 并循环直到 i 不再小于 31，每次增加 1，所以它将运行一次，从 30 递增到 31 然后跳出循环。

也不确定为什么你的图像包含在一个数组中，除非这是一些单独的要求，特别是因为数组中只有一个图像。

你可以重构成这样：

function showIconThirtyTimes(){
    var icon ="<img src='img/icon1.gif'>"

    for(var i=0; i<30; i++) {
        document.getElementById("answer").innerHTML += icon;
    }
}

如果您需要将图像存储在数组中，或者如果您需要将计数器写入文档 i，您应该能够很容易地将这些要求添加回去。主要问题是你的 for 循环。

Answer 2

如果你想像现在这样从数组中调用图标，你可以使用类似这样的方法。但是，正如@lwalden 所说，您不需要使用数组。

function icon(){
    var img = new Array();
    img[0] = {img: "img/icon1.gif"};
    var icon = img[0];
    for(var i=0; i < 30; i++){
        document.getElementById("answer").innerHTML += i+1 + ' ' + icon + '<br />';
    }
}

function icon2(){
    var img = new Array();
    img[0] = {img: "img/icon1.gif"};
    img[1] = {img: "img/icon2.gif"};
    for(var i=0; i < 30; i++){
        if(i % 2 == 0)
            icon = img[0];
        else
            icon = img[1];
        document.getElementById("answer").innerHTML += i+1 + ' ' + icon + '<br />';
    }
}

// Prints the specified icon 30 times
icon();

// Alternates icon 1 and 2 30 times
icon2();

输出还将显示您所处的增量。第二个函数非常相似，只是它只是使用模数 (%) 运算符检查当前增量是偶数还是奇数。它将在第一个增量（从 0 开始）打印图标 1，在第二个增量打印图标 2 并分别交替。

for 循环和图像

for loops, and images

javascript

loops

for-loop