javascript - 动态设置具有 3 种颜色的 div 样式

Question

我的要求是我必须用 3 种颜色动态设置 div 的样式。我已经使用此代码使用随机颜色完成了

function randomColors() {

var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 4; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
}
return color;

我只需要重复 3 种颜色，这将是动态循环的!我该怎么做？

我只想动态设置这 3 种颜色#09c5f9、#05f6d5、#a42cff。

for(i=1; i <= pmap; i++){
      $("#thumbnail"+i).css("background-color",randomColors());
}

Answer 1

我可以想到两种方法。

1) 如果您使用的是 jQuery(我认为这是正确的做法)，最简单的方法是声明三个类并使用 jQuery 交换它们。

CSS:

.teal{
    background-color: #09c5f9;
}
.emerald{
    background-color: #05f6d5;
}
.purple{
    background-color: #a42cff;
}

和javascript:

$("#some-element").removeClass("teal emerald").addClass("purple");
$("#some-element").removeClass("teal purple").addClass("emerald");
$("#some-element").removeClass("purple emerald").addClass("teal");

2) 这种方式使用了裸机 JS，并且还使用了您在原始帖子中使用的相同编程风格。

var colors = ["#09c5f9", "#05f6d5", "#a42cff"];

function getColor(colorNumber){
    return colors[colorNumber];
}

希望这对您有所帮助。