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

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