javascript - 我如何给每个单独的 div 一个随机的背景颜色？

Question

我正在构建一个网站，我希望页面上的每个 div 都是从以下选项中随机选择的颜色。但是一旦我运行代码，每个 div 都是相同的颜色。我哪里错了？

 $(document).ready(function(){ 
   var colors = ['red','blue','green','yellow','cyan','orange'];
   var new_color = colors[Math.floor(Math.random()*colors.length)];
   $('.color-div').css('background-color',new_color);
 });

Answer 1

这是一个解决方案，您可以循环遍历所有 .color-div 并设置“随机” 每个颜色。

它使用 .each()方法。

您的代码是正确的...但只运行了一次并将颜色应用于所有元素。

$(document).ready(function(){

  var colors = ['red','blue','green','yellow','cyan','orange'];
  
  $('.color-div').each(function(){
    var new_color = colors[Math.floor(Math.random()*colors.length)];
    $(this).css('background-color',new_color);
  });
 
});  // End ready

div{
  height:2em;
  width: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-div"></div>
<div class="color-div"></div>
<div class="color-div"></div>
<div class="color-div"></div>
<div class="color-div"></div>