javascript - 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")选择所有具有 class的现有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 应用相同的颜色，您可以使用eachJQuery 中的方法

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

Answer 3

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

尝试这个：

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