javascript - 通过javaScript为div添加背景颜色

Question

尝试使用 for 循环向 div 添加不同的背景颜色。 我将所有颜色存储在 20 个变量中，并且希望 20 个 div 中的每一个都有自己的颜色。我试图将其设置为“背景颜色”:(bar+i)，但这确实有效。 如果我只传递一个像 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');
}