for循环和数组来获取图像

Instructions are to Create an array and store the file names into a 4 element long array. Create 4 tags with blank src attributes, their id attributes should be labeled as "image1" through "image4" Create a for loop which will change the src attributes of each img element to the 4 files from the zip.

说明是创建一个数组并将文件名存储到一个4元素的长数组中。使用空白src属性创建4个标签,其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>

3 个解决方案

#1

Your loop starts at 0 and ends at 3, while your images start at 1 and ends at 4. If you start the loop at 1 and count up until the end of the length of the array, it'll give the proper image the proper source.

你的循环从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;

should be

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

#3

One approach, a little different to your current technique:

一种方法,与您当前的技术略有不同:

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];
});

The problem you faces is, as noted, the getElementById('image[i]'), this looked for an element with the literal id of image[i], rather than the id of 'image' + i ('image1','image2', etc); because you enclosed the index in the string, rather than concatenated the string 'image' with the number represented by the i variable.

你所面临的问题是,如上所述,getElementById('image [i]'),它寻找一个文字id为image [i]的元素,而不是'image'+ i('image1')的id, 'image2'等);因为您将索引括在字符串中,而不是将字符串'image'与i变量表示的数字连接起来。

References:

#1