Question

我正在尝试创建64个方块并为每个方块赋予独特的背景色。我非常接近，但我似乎只能得到一种颜色。

function randomCol() {
    return Math.floor(Math.random()*16777215).toString(16); 
}

$(function(){
  for(i=0; i<64; i++) {
        $('<div class="square"></div>').insertAfter(".starter");
        $(".square").css({'background':'#' + randomCol()});
  }
 });

Answer 1

$(".square")选择所有现有的元素，使用类square，因此您要为每个元素指定相同的颜色。

您只想将颜色分配给刚刚创建的颜色：

$('<div class="square"></div>')
   .css('background', '#' + randomCol())
   .insertAfter(".starter");

两个建议：

只创建一次DOM节点并克隆它（实际上可能不是改进，你必须尝试）。
一次插入所有元素以避免多页重排。

$(function(){
    var $node = $('<div class="square"></div>'),
        $elements = $();
    for(i=0; i<64; i++) {
        $elements = $elements.add($node.clone().css('background','#' + randomCol()));
    }
    $('.starter').after($elements);
});

Answer 2

您正在将背景样式应用于方形类。因为你所有的div都使用同一个类，所有div都将使用你生成的最后一种颜色。

试试这个：

$(function(){
  for(i=0; i<64; i++) {
        $('<div id="square' + i + '"></div>').insertAfter(".starter");
        $("#square" + i).css({'background':'#' + randomCol()});
  }
 });

Answer 3

您为每个Div应用相同的颜色，您可以使用JQuery中的each方法

$(function(){
  for(i=0; i<64; i++) {
    $('<div class="square"></div>').insertAfter(".starter");
  }
  $(".square").each(
     function(s){
       $(s).css({'background':'#' + randomCol()})
     }
  );
});

或

$(function(){
  for(i=0; i<64; i++) {
    $('<div class="square"></div>').
       insertAfter(".starter").
       css({'background':'#' + randomCol()});
  }
});

for循环中有多个随机结果？

3 个答案: