使用javascript和jQuery重新加載頁面時如何添加顏色

Question

我已經創建了多種顏色。 我正在嘗試使用ready。函數內部的colors.forEach來為此數組中的每種顏色調用addBox。 計划是，當重新加載頁面時，我看到所有顏色都已添加。 讓我知道您是否需要html代碼

function addBox(color) {
    $('#colors').prepend('<div class="item" style="background-color: ' + color + ';"></div>');
}


var colors = ['22ac5e', 'd68236', '770077'];

// I think my problem lies after this line
$(document).ready(function () {
//  var colors = ['22ac5e', 'd68236', '770077'];
    colors.forEach(addBox(color))

});

提前謝謝了。

Answer 1

您是將addBox(color)的結果提供給forEach()循環，實際上並沒有提供該函數的引用 ，因此可以對其進行調用。

您可以通過兩種方法來修改代碼，使其起作用。 首先，一個匿名函數：

colors.forEach(function(color) {
  addBox(color)
});

或使用箭頭功能（如果您完全不需要IE支持）：

colors.forEach(color => addBox(color));

最后請注意，CSS中的十六進制顏色將需要#前綴：

'... style="background-color: #' + color + ';" ...'