将数组中的颜色改组为 5 个 div jQuery

Question

新手开发，经验不足请耐心等待。我需要在我的 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>

JS

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;


    while (0 !== currentIndex) {


        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

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

$(".circle").css("background", colors);

我只是不明白我的代码有什么问题。请帮助！

Answer 1

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

这样试试

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

});

Answer 2

让我们考虑一下。假设您的第一个 randomIndex 来自 5 的 array.length。结果是randomIndex等于2。一旦currentIndex减1，下一个选择大小就是4。如果您再次获得 2 的 randomIndex 会怎样？您已经覆盖了第一个 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);

参见JSFiddle。

最终我所做的是使用 array.splice 的组合以及包括 JQuery WITHIN 的 CSS 样式环形。这解决了 Anik 强调的问题。如果您打算设置每个圆圈的样式，那么您需要在一个循环 statement/method.

中进行

Answer 3

这样做：

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">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
    <div class="circle">&nbsp;</div>
</div>

Answer 4

尝试利用 .css(propertyName, function)、Array.prototype.slice()、Array.prototype.splice()

var colors = ["red", "blue", "green", "black", "pink"], c;

$(".circle").css("backgroundColor", function(index, value) {
    // if `index` : `0` define `c` as copy of `colors` array
    if (!index) c = colors.slice();
    return c.splice(Math.floor(Math.random() * c.length), 1)
});

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="colorBox">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

将数组中的颜色改组为 5 个 div jQuery

Shuffling colors in an array to 5 divs jQuery

javascript

arrays

jquery

shuffle

colors