Question

我创建了一个用于存储一系列.gif图像的数组，我只是想通过使用document.getElementById来更改.src值来测试所有内容，但是当我更改它并加载页面时图像与以前保持一致。

    function setImage()
    {
    var images = new Array();
    images[0] = anemone.gif; 
    images[1] = ball.gif;
    images[2] = crab.gif;
    images[3] = fish2.gif;
    images[4] = gull.gif;
    images[5] = jellyfish.gif;
    images[6] = moon.gif;
    images[7] = sail.gif;
    images[8] = shell.gif;
    images[9] = snail.gif;
    images[10] = sun.gif;
    images[11] = sunnies.gif;
    images[12] = whale.gif;

    var slots = new Array();
    slots[0] = document.getElementById("slot" + 0);
    slots[1] = document.getElementById("slot" + 1);
    slots[2] = document.getElementById("slot" + 2);
    slots[0].src = "snail.gif";
    document.getElementById('slot0').src = images[0];
    alert(images.length);
    }

我无法理解为什么图像不会改变，但我知道它必须是非常简单的。我一直在浪费时间试图改变这一点，但没有任何作用。任何人都可以指出我的方式错误吗？

Answer 1

您的代码存在一些问题：

您的文件名必须是字符串，因此必须引用它们（也可以简化数组创建）：

var images = ['anemone.gif', 'ball.gif', 'crab.gif', 'fish2.gif', 'gull.gif', 'jellyfish.gif', 'moon.gif', 'sail.gif', 'shell.gif', 'snail.gif', 'sun.gif', 'sunnies.gif', 'whale.gif'];

另外，请确保您的slot - 元素正确，引用所有属性，如：

<img id="slot0" class="slot" src="crab.gif" width="120" height="80">

当您创建slots - 数组时，您可以这样做（不需要连接ID字符串）：

var slots = [document.getElementById('slot0'), document.getElementById('slot1'), document.getElementById('slot2')];

最后确保在文档加载/ DOM准备就绪时调用函数。如果您不想使用像jQuery这样的框架，您最简单的赌注可能仍在使用window.onload：

window.onload = setImage; //note that the parens are missing as you want to refer to the function instead of executing it

进一步阅读Arrays，window.onload和DOMReady：

图像数组和.src - 图像不变

1 个答案: