为多个div设置随机背景色

Question

我在一个页面上有多个div，我想给它分配一个随机的背景色。如果可能的话，除非我用完了要使用的颜色，否则颜色不应该重复。我已经设法让div容器从数组中加载带有随机颜色的div容器，但是对于所有剩余的div，颜色总是相同的。如果背景色已经被另一个div所使用，我可以做些什么来将背景色设置为不同的值吗？

以下是我目前为止(不工作)的情况

function shuffleColors() {
    var colors = ["bg-red", "bg-green", "bg-purple", "bg-blue"];
    var randomColor = Math.floor(Math.random()*colors.length);
    // var randomColor = colors[Math.floor(Math.random()*colors.length)];
    var contentBlock = $('.content-block');

    for (var i = 0; i < contentBlock.length; i++) {

        if (colors[i] == colors[randomColor]) {
            colors[randomColor]++
            contentBlock.addClass(colors[randomColor]);
        }

    }
}

shuffleColors();

下面的代码显示了我如何设法选择一个随机的背景颜色，但是对于所有div来说，颜色是相同的。

var background = ["bg-red", "bg-green", "bg-purple", "bg-blue"];
var randomColor = Math.floor(Math.random()*background.length);           

$('.content-block').addClass(background[randomColor]);

Answer 1

看起来问题可能在于你如何增加你的随机颜色：

colors[randomColor]++

这不是正确的方法。您可能只想在数组中增加索引：

randomColor++

您还需要确保您保持在您的颜色数组的范围内。我建议使用mod (%)：

randomColor = (randomColor + 1) % colors.length

使用jQuery循环时，您可能会得到如下所示：

$(".content-block").each(function () {
    $(this).addClass(colors[randomColor]); // assign the color
    randomColor = (randomColor + 1) % colors.length; // step to the next color; this will loop to the beginning thanks to mod
});

Answer 2

您肯定是沿着正确的路线前进，但您可以简化循环，并使用.each()函数迭代页面上的所有$('.content-block')元素。您只设置了一次随机颜色，因此您可以将其移动到每个函数中：

$('.content-block').each(function(i, el) {
    var randomColor = Math.floor(Math.random()*background.length);
    $(el).addClass(background[randomColor]);
});

我还意识到，您可能希望每个$('.content-block')是一个不同的颜色与另一个。在这种情况下，每次分配颜色时，都要从colors中删除颜色：

function getRandomColour() {
    var randomNumber = Math.floor(Math,random()*colors.length();
    var randomColour = colors[randomNumber];
    var colourPosition = colors.indexOf(randomColour);

    colours.splice(colourPosition, 1); // Remove colour from array

    return randomColour;    
}

$('.content-block').each(function(i, el) {
    $(el).addClass(background[randomColor]);
});

Answer 3

改变这个

contentBlock.addClass(colors[randomColor]);

对此：

contentBlock[i].addClass(colors[randomColor]);

希望能帮上忙。