Javascript重置循環，直到達到頁面上的最大元素數

Question

我在玩耍以嘗試了解更多Javascript，並且有圖像的json列表（現在僅占位符），並且用json文件中的src替換頁面上所有圖像的img 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

修改后考慮了JSON的長度並使用三元運算符來節省空間

您希望for循環在圖像數量上運行，而不是在JSON中的項目數量上運行。 然后，使用一個單獨的變量對JSON數組進行計數，並在命中3（即總共4個項目）時將其重置。

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;

}

您可以在這里查看小提琴： 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

你也可以這樣

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