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

Question

I'm playing around trying to learn more Javascript and I have a json list of images (for now just placeholders) and I'm replacing the img src of all images on the page with the src from the json file.

My problem is that when I hit the 4 image sources listed in the json file, the script stops. What I need to do is reset the script to continue from the start again until all images have their src changed...

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

I attempted something (which could be miles off) - but I think I may be using the if statement hugely wrong.

Say there is 10 images on the page like:

<img src="myimage.jpg" /> 

I need to be able to reset the loop until all 10 images have their src changed. Any help will be much appreciated.

Answer 1

Revised to take into account the length of your JSON and use ternary operator to save space

You want you for loop to run on the number of images, not the number of items in your JSON. Then, use a separate variable to count through your JSON array and reset when it has hit 3 (ie 4 items total).

var img_counter = 0;
for(var i = 0; i < document.images.length; i++) {

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

    img_counter++;
    img_counter = (img_counter == fogle_booth.length) ? 0 : img_counter;

}

You can view the fiddle here: https://jsfiddle.net/o2cfhf3s/3/

Answer 2

// 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

Answer 3

You can also do it this way

    <script>
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"
}];

   var image_src = document.getElementsByTagName("img");
var curr_img=0,count=image_src.length;
for(var i = 0; i < fogle_booth.length; i++) {
    if(curr_img<count){
    var obj = fogle_booth[i];
    image_src[curr_img++].setAttribute("src",(obj.image));
    console.log(obj.image);
    if(i==fogle_booth.length-1)
    i=-1;
    }
}
</script>

Answer 4

 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" }]; var images = document.getElementsByTagName("img").length; while (images > 0) { var rest = fogle_booth.length > images ? images : fogle_booth.length; for(var i = 0; i < rest; i++) { var obj = fogle_booth[i]; var image_src = document.getElementsByTagName("img"); image_src[images-1].setAttribute("src",(obj.image)); console.log(obj.image); images--; } } 

 <img></img> <img></img> <img></img> <img></img> <img></img> <img></img> <img></img> <img></img> <img></img> <img></img>