Javascript 重置循环，直到达到页面上的最大元素数

Question

我正在尝试学习更多 Javascript，我有一个 json 图像列表(现在只是占位符)，我正在替换 img src页面上的所有图像都带有来自 json 文件的 src。

我的问题是，当我点击 json 文件中列出的 4 个图像源时，脚本停止了。我需要做的是重置脚本以再次从头开始继续，直到所有图像都更改了它们的 src ...

JS:

var fogle_booth = [{
        "name": "Fogle in trunks",
        "image": "http://placehold.it/350x150"
    }, {
        "name": "Fogles does fishing",
        "image": "http://placehold.it/450x150"
    }, {
        "name": "We love fogle",
        "image": "http://placehold.it/550x150"
    }, {
        "name": "Fogle goes walking",
        "image": "http://placehold.it/650x150"
}];


for(var i = 0; i < fogle_booth.length; i++) {

    var obj = fogle_booth[i];
    var image_src = document.getElementsByTagName("img");
    image_src[i].setAttribute("src",(obj.image));
    console.log(obj.image);

    if(image_src.length > obj.length) {
        console.log("resetting");
        continue;
    }
}

我尝试了一些事情(可能相距甚远)- 但我认为我使用的 if 语句可能大错特错。

假设页面上有 10 张图片，例如:

<img src="myimage.jpg" /> 

我需要能够重置循环，直到所有 10 个图像都更改了它们的 src。任何帮助都感激不尽。

Answer 1

// get the list of images first
var imgs = document.getElementsByTagName("img");

// set a counter
var count = 0;

// loop through the image nodelist
for (var i = 0, l = imgs.length; i < l; i++) {

    // use count to grab the object from the array
    var obj = fogle_booth[count];

    // set your image source to be the value of the image name in your object
    imgs[i].src = obj.image;

    // increase the count
    // if it hits the length of the array, reset count
    count++;
    if (count === fogle_booth.length - 1) count = 0;
}

DEMO