只顯示陣列的最後一個實例的循環

Question

我試圖通過循環數組並向我的HTML字符串中輸入數據來生成HTML內容。

我利用堆棧溢出以下答案嘗試（沒有運氣）： JavaScript closure inside loops – simple practical example

其他答案是我已經看過是什麼，我想做的事情太複雜。

這裏是我的原代碼：

var staticOptions = [ 
    { 
    name : "option1", 
    id : "option1", 
    img : "img/extras/360-chasis.jpg" 
    }, 
    { 
    name : "option2", 
    id : "option2", 
    img : "img/extras/lifing-eye.jpg" 
    }, 
    { 
    name : "option3", 
    id : "option3", 
    img : "img/extras/360-window.jpg" 
    }, 
    { 
    name : "option4", 
    id : "option4", 
    img : "img/extras/led-flood-light.jpg" 
    }, 
    { 
    name : "option5", 
    id : "option5", 
    img : "img/extras/360-canteen-light.jpg" 
    } 
]; 

for (var i = 0; i < staticOptions.length; i++) { 
    var optionHtml = '<div class="form-check width30">' 
       + '<label class="form-check-label" for="' 
       + staticOptions[i].id 
       + '">' 
       + '<input class="form-check-input" id="' 
       + staticOptions[i].id 
       + '" type="checkbox">' 
       + staticOptions[i].name 
       + '<!--  <span class="indiv-price">£300</span>-->' 
       + '</label>' 
       + ' </div>' 
       + '<div class="info-img hide"><img src="' 
       + staticOptions[i].img 
       + '"></div>'; 

    $("#bodyOptions").html(optionHtml); 

}; 

，因爲它代表此代碼只輸出我的數組中的最後一項。但是，如果我使用alert方法輸出html，它將按照預期循環通過數組中的所有五個對象。

閱讀問題的最高票的回答上面提到的「倒閉潮」我想這個問題的答案適應我的代碼，但它不輸出任何東西（沒有錯誤顯示其一）：

function createfunc(i) { 
    return function() { 

     var optionHtml = '<div class="form-check width30">' 
       + '<label class="form-check-label" for="' 
       + [i].id 
       + '">' 
       + '<input class="form-check-input" id="' 
       + [i].id 
       + '" type="checkbox">' 
       + [i].name 
       + '<!--  <span class="indiv-price">£300</span>-->' 
       + '</label>' 
       + ' </div>' 
       + '<div class="info-img hide"><img src="' 
       + [i].img 
       + '"></div>'; 

    $("#bodyOptions").html(optionHtml); 

    }; 
} 

for (var i = 0; i < staticOptions.length; i++) { 
    staticOptions[i] = createfunc(i); 
} 

總之一切我想要做的是創建五段HTML代碼，它們從數組中輸入每個實例的數據，並將其寫入HTML到頁面。

在此先感謝。

Answer 1

嘗試：

$("#bodyOptions").html($("#bodyOptions").html() + optionHtml); 

好像你正在用新的選項替換整個#bodyOptions HTML，所以你需要做的是添加到它所包含的內容了。