通過javaScript向div添加背景顏色

Question

嘗試使用for循環向div添加不同的背景顏色。 我將所有顏色存儲在20個變量中，我希望20個div中的每一個都有自己的顏色。我試圖設置它像這樣的「背景顏色」:(酒吧+我），但那是行得通的。 它工作，如果我只是通過一個像bar1變量。我究竟做錯了什麼？任何幫助是極大的讚賞。

var bar1 = "#afb626"; 
var bar2 = "#5b590a"; 
var bar3 = "#b44708"; 
var bar4 = "#950000"; 
var bar5 = "#eb9f9f"; 
var bar6 = "#246d13"; 
var bar7 = "#afb626"; 
var bar8 = "#a60046"; 
var bar9 = "#733702"; 
var bar10 = "#d1570d"; 
var bar11 = "#afb626"; 
var bar12 = "#5b590a"; 
var bar13 = "#b44708"; 
var bar14 = "#950000"; 
var bar15 = "#eb9f9f"; 
var bar16 = "#246d13"; 
var bar17 = "#afb626"; 
var bar18 = "#a60046"; 
var bar19 = "#733702"; 
var bar20 = "#afb626"; 


for (var i = 0; i < 20; i++) { 
    $('<div/>', { id: 'foo'+i,}).appendTo('body'); 
     $("#foo"+i).css({"background-color":(bar+i),"height": "100%", "width": screenWidth, "float": "right"}); 
} 

Answer 1

使用數組來代替：

var bars = ["#afb626", "#5b590a", ...]; 

for (var i = 0, z = bars.length; i < z; i++) { 
    $('<div/>', { 
     id: 'foo' + i 
    }).css({ 
     backgroundColor: bars[i], 
     height: "100%", 
     width: screenWidth, 
     float: "right" 
    }).appendTo('body'); 
} 

Answer 2

(bar+i) 

應該

(window["bar"+i]) 

Answer 3

有代碼中的一些問題。我爲你

JSFiddle Demo Link

var bar = ["#afb626", "#5b590a", "#b44708", "#950000", "#eb9f9f", "#246d13", 
       "#afb626", "#a60046", "#733702", "#d1570d", "#afb626", "#5b590a", 
       "#b44708", "#950000", "#eb9f9f", "#246d13", "#afb626", "#a60046", 
       "#733702", "#afb626"]; 


for (var i = 0; i < bar.length; i++) { 
    $('<div/>', {id: 'foo' + i}) 
     .css({ 
     "background-color": bar[i], 
     "height": "100px", 
     "width": $(window).width(), 
     "float": "left" 
    }).appendTo('body'); 
} 

的問題

你應該用你的項目一個陣列一個簡單的例子。使負載更有意義

for (var i = 0; i < 20; i++) { 
    $('<div/>', { id: 'foo'+i, /* < you shouldn't have a comma here */ }).appendTo('body'); 
     $("#foo"+i).css({"background-color":(bar+i),"height": "100%", "width": screenWidth, "float": "right"}); 
} 

// What is screenWidth? 
// You shouldn't create your element - append it to body then reselect it??