for循环和数组以获取图像[关闭]答案

【问题标题】：for loop and array to get image [closed]for循环和数组以获取图像[关闭]
【发布时间】：2014-09-30 00:43:00
【问题描述】：

说明是创建一个数组并将文件名存储到一个 4 元素长数组中。创建 4 个带有空白 src 属性的标签，它们的 id 属性应标记为“image1”到“image4” 创建一个 for 循环，它将每个 img 元素的 src 属性更改为 zip 中的 4 个文件。

<body>

    <img id="image1" src="" alt="">
    <img id="image2" src="" alt="">
    <img id="image3" src="" alt="">
    <img id="image4" src="" alt="">

<script>


    myArr = [ "images/bugeyes.png", "images/chubby.png", "images/dawww.png", "images/twocats1image.png"];

    myArr[myArr.length] = 4

    for(i = 0; i < myArr.length; i++)
    {
    document.getElementById("image[i]").src = myArr[i].src;
}
</script>

</body>
</html>

【问题讨论】：

想必没有id="image[i]"的元素
这是你的作业还是什么？ zerkms 刚刚回答了你的问题。
Concatenate 组合字符串和变量："image" + i
@zerkms 我要为它制作一个
吗？
@MichaelChaney 是的，我正在尝试找出什么不起作用。

标签： javascript html arrays for-loop

【解决方案1】：

您的循环从 0 开始到 3 结束，而您的图像从 1 开始到 4 结束。如果您从 1 开始循环并计数到数组长度的末尾，它将为正确的图像提供正确的来源。

myArr = [ "images/bugeyes.png", "images/chubby.png", "images/dawww.png", "images/twocats1image.png"];

for(i = 1; i <= myArr.length; i++)
{
    var currentImg = "image" + i;
    document.getElementById(currentImg).src = myArr[i];
}

【讨论】：

【解决方案2】：

document.getElementById("image[i]").src = myArr[i].src;

应该是

document.getElementById("image" + i).src = myArr[i].src;

【讨论】：

【解决方案3】：

一种方法，与您当前的技术略有不同：

var imgElements = document.querySelectorAll('body > img[id^="image"]'),
    sources = [ "images/bugeyes.png", "images/chubby.png", "images/dawww.png", "images/twocats1image.png"];

[].forEach.call(imgElements, function (img, index) {
    img.src = sources[index];
});

如前所述，您面临的问题是getElementById('image[i]')，它查找具有image[i] 的文字id 的元素，而不是'image' + i 的id ('image1',@987654330) @， ETC）;因为您将索引包含在字符串中，而不是将字符串 'image' 与 i 变量表示的数字连接起来。

参考资料：

【讨论】：