Javascript 将数组中的颜色混洗为5个div jQuery

刚进入开发领域，所以如果我缺少xp，请耐心等待。我需要在我的5个圆圈中随机放置5种特定颜色（我假设使用数组和洗牌函数）

HTML

<div id="colorBox"> 
    <div class="circle"></div>          
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>          
    <div class="circle"></div>          
</div>

<div id="colorBox">
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
</div>

---

我只是不明白我的代码出了什么问题。请帮忙

您正在设置颜色数组，但背景需要单个值而不是数组 此外，您还需要分别对每一个进行设置

像这样试试

var colors = ['red', 'blue', 'green', 'black', 'pink'];
shuffle(colors);
var i = 0;
$(".circle").each(function() {
    $(this).css("background", colors[i++]);

});

---

让我们考虑一下。假设您的第一个

随机索引

来自

数组。长度
为5。结果显示，
随机指数
等于2。一旦
currentIndex
的值减少1，下一个选择大小将超出4。如果再次获得
随机索引
为2，会发生什么情况？您已经覆盖了第一个CSS样式。您需要做的是在使用阵列后从阵列中删除颜色：

function shuffle(array) {

  var randomIndex;
  var currentIndex = 0;

  while (0 !== array.length) {

    randomIndex = Math.floor(Math.random() * array.length);
    var arrayColor = array[randomIndex];

    if (randomIndex > -1) //this cond. statement will remove the array element
     {
      array.splice(randomIndex,1);                 
     }

    $(".circle").eq(currentIndex).css("background", arrayColor); // Set each circle starting at element zero with the "eq" method
    currentIndex++;
 }

}

var colors = ['red', 'blue', 'green', 'black', 'pink'];
shuffle(colors);

看

最后，我所做的是结合使用
array.splice
，并在循环中包含JQuery的CSS样式。这解决了Anik强调的问题。如果您计划设置每个圆的样式，则需要在循环语句/方法中进行设置。
这样做可以：

Javavscript

var colors = shuffle(['red', 'blue', 'green', 'black', 'pink']);
$(".circle").each(function(index) {
  $(this).css("background", colors[index]);
});

function shuffle(arr) {
  for (i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
  }
  return arr;
}

HTML

<div id="colorBox"> 
    <div class="circle"></div>          
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>          
    <div class="circle"></div>          
</div>

<div id="colorBox">
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
</div>


尝试使用
.css（propertyName，function）
，
Array.prototype.slice（）
，
Array.prototype.splice（）


var colors=[“红色”、“蓝色”、“绿色”、“黑色”、“粉色”]、c；
$（“.circle”）.css（“背景色”，函数（索引，值）{
//如果'index'：'0'将'c'定义为'colors'数组的副本
如果（！index）c=colors.slice（）；
返回c.splice（数学地板（数学随机（）*c.length），1）
});
.circle{
宽度：100px；
高度：100px；
边界半径：50px；
}

我想我忘了提到我只想要每种颜色中的一种。所以上面的例子不起作用。谢谢你的支持help@ReptarNation好的，我删除了，但你需要。每个都要使用值哦，好的，我知道它试图将颜色作为一个整体而不是单独的div。谢谢你这么长时间以来一直在这样做。尽管Anik是正确的，你需要单独设置每个圆，这个方法不能完全回答这个问题。@A.Sharma，op没有询问洗牌。。询问关于不设置颜色的问题。答案是部分或全部，但这并不意味着你们会投否决票。