javascript - 从背景颜色列表中选择并为每个元素应用不同的颜色

Question

我有一个文章列表(每个“帖子/文章”都包含在一个 <article> 元素中)。

我想随机化每篇文章的背景颜色，但将其限制为仅一组颜色(我的调色板)。

(奖励:有没有办法让它在列表中的所有其他颜色都被使用之前不重复使用一种颜色？)

我想将其限制为的颜色列表:

#113F8C
#01A4A4
#00A1CB
#61AE24
#D0D102
#32742C
#D70060
#E54028
#F18D05

Here's a JSFiddle测试除了 jQuery 函数的内容外，它包含所有内容。

---

更新:纯 CSS 解决方案

我想出了一个只使用 CSS 的好解决方案!如果我不需要任何“随机性”，我可以简单地使用 css“nth-child”选择器来完成任务。

这是什么意思:

• 每次查看页面时颜色的顺序将始终相同(当然，除非我手动更改它们。)
• 颜色不会连续重复两次。
• 不涉及“随机性”。
• 我可以在我的调色板中添加任意多的颜色。我所要做的就是更改 # 中的“:nth-child(#n+x) ”到颜色总数。

结果: http://jsfiddle.net/E5J7a/19/

article:nth-child(9n+1) {background-color: #113F8C;}
article:nth-child(9n+2) {background-color: #01A4A4;}
article:nth-child(9n+3) {background-color: #00A1CB;}
article:nth-child(9n+4) {background-color: #61AE24;}
article:nth-child(9n+5) {background-color: #D0D102;}
article:nth-child(9n+6) {background-color: #32742C;}
article:nth-child(9n+7) {background-color: #D70060;}
article:nth-child(9n+8) {background-color: #E54028;}
article:nth-child(9n+9) {background-color: #F18D05;}

Answer 1

试试下面的代码。首先它创建一个数组。然后它会在使用时从数组中删除颜色:

Fiddle

var colorArr = new Array('#113F8C','#01A4A4','#00A1CB','#61AE24','#D0D102','#32742C','#D70060','#E54028','#F18D05');

$("article").each(function() {
    var randomColor = colorArr[Math.floor(Math.random()*colorArr.length)];
    var tg = colorArr.indexOf(randomColor); 
    colorArr.splice(tg, 1);
    $(this).css({'background-color':randomColor});
});

上面的 fiddle 只为文章的颜色数量等于数组中的颜色数。如果你想一次又一次地重复使用相同的颜色，请使用下面的 fiddle :

Fiddle 2

var colorArr = new Array('#113F8C','#01A4A4','#00A1CB','#61AE24','#D0D102','#32742C','#D70060','#E54028','#F18D05');

$("article").each(function() {
    var randomColor = colorArr[Math.floor(Math.random()*colorArr.length)];
    var tg = colorArr.indexOf(randomColor); 
    colorArr.splice(tg, 1);
    if(colorArr.length==0)
    {
        colorArr = new Array('#113F8C','#01A4A4','#00A1CB','#61AE24','#D0D102','#32742C','#D70060','#E54028','#F18D05');
    }
    $(this).css({'background-color':randomColor});
});