0

for ループを使用して div に異なる背景色を追加しようとしています。すべての色を 20 個の変数に保存し、20 個の div のそれぞれに独自の色を持たせたいと考えています。この "background-color":(bar+i) のように設定しようとしていますが、それでうまくいきます。bar1 のような 1 つの変数を渡すだけで機能します。私は何を間違っていますか？どんな助けでも大歓迎です。

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"});
}
4

3 に答える 3

1 
(bar+i)

する必要があります

(window["bar"+i])
于 2013-07-08T12:11:30.340 に答える
0

コードにいくつかの問題があります。私はあなたのために簡単な例を作りました

JSFiddleデモリンク

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??
于 2013-07-08T12:17:31.993 に答える