每個元素的顏色隨機

Question

我想使容器中的每個元素具有從數組中隨機選擇的不同背景色。 如何讓腳本針對每個新元素分別運行？

 $(document).ready(function(){ var colors = ["#ff0000","#ff00ff","#00ff00"]; var rand = Math.floor(Math.random()*colors.length); $('.resource-cards > div').css("background-color", colors[rand]); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="resource-cards"> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> </div> 

Answer 1

您可以使用each遍歷每個div並分配隨機顏色。

 $(document).ready(function() { $('.resource-cards > div').each(function() { var colors = ["#ff0000", "#ff00ff", "#00ff00"]; var rand = Math.floor(Math.random() * colors.length); $(this).css("background-color", colors[rand]); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="resource-cards"> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> </div> 

Answer 2

要使每個元素單獨工作，您需要遍歷div元素並為每個元素生成一個隨機數，如下所示：

 $(document).ready(function() { var colors = ["#ff0000", "#ff00ff", "#00ff00"]; $('.resource-cards > div').each(function() { var rand = Math.floor(Math.random() * colors.length); $(this).css("background-color", colors[rand]); }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="resource-cards"> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> </div> 

Answer 3

從數組中隨機選擇的容器的不同背景色。

使用循環的概念。

$(document).ready(function() {

  $('.resource-cards > div').each(function() {
    var colorsArray = ["#338DFF","#ff0000", "#ff00ff", "#00ff00","#FF5733"];
    var randnum = Math.floor(Math.random() * colorsArray.length);
    $(this).css("background-color", colorsArray[randnum]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resource-cards">
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
</div>