Question

我一直试图找到替代div的背景颜色。我总共有11种颜色，需要循环使用它们，并且连续两次显示相同的颜色。我已经在css中查看了nth-child，但是在几行中没有任何结果。现在我试图通过javascript中的循环来做到这一点。有没有人知道更简单的方法？我有这个，它经历了很多次迭代。我只是被困在这一点上。

function ColorChange(){
    var divcount = $('.time').length;
    var timediv = document.getElementsByClassName('time'); 
    var mycolors = new Array("#0066cc","#996699","#990033","#ff9933", "#99cc33","#33cc66","#009999","#6699cc", "#999999","#534741", "#663333"); 
    for(var i = 0; i<timediv.length; i++){
        for(var l = 0; l<mycolors.length;l++){
            timediv[i].style.background = mycolors[l]; 
        }
    }
}

Answer 1

您似乎有效地将背景颜色设置为列表中的最后一种颜色。为什么不试试这个：

for( var i=0; i<timediv.length; i++) {
    timediv[i].style.backgroundColor = mycolors[i % mycolors.length];
}

这将循环显示已定义的颜色，并且由于%运算符，如果它超过了结尾，它将循环到列表的开头。

Answer 2

您可以创建一个实用程序类来帮助循环。

这是一个这样一个类的例子。你可以通过调用next()无限地传递一个数组并循环遍历它。

http://jsfiddle.net/3Gw9C/

function Cycler (collection) {
    this.collection = collection;
    this.index = 0;

    this.next = function () {
        if (this.index >= this.collection.length) {
            this.index = 0;
        }
        return this.collection[this.index++];
    }
}

var mycolors = new Array("#0066cc","#996699","#990033","#ff9933", "#99cc33","#33cc66","#009999","#6699cc", "#999999","#534741", "#663333");

var cycler = new Cycler(mycolors);

for (var i = 0; i < timediv.length; i++) {
    timediv[i].style.backgroundColor = cycler.next();
}

Answer 3

您似乎正在混合使用jquery和javascript。所以我去了jquery路线

http://jsfiddle.net/bhlaird/NyKFf/

function ColorChange(){

    var count = 0;
    var mycolors = new Array("#0066cc","#996699","#990033","#ff9933", "#99cc33","#33cc66","#009999","#6699cc", "#999999","#534741", "#663333"); 
    $('.time').each(function() {
        $(this).css('background-color', mycolors[count++]);
        if (count > mycolors.length) count = 0;
    });

}

Answer 4

另一种选择是纯粹的CSS路线： http://jsfiddle.net/bhlaird/9Hbmr/

#colors .time:nth-child(11n) {
    background-color:#0066cc;
}
#colors .time:nth-child(11n+1) {
    background-color:#996699;
}
#colors .time:nth-child(11n+2) {
    background-color:#990033;
}
#colors .time:nth-child(11n+3) {
    background-color:#ff9933;
}

等

坚持骑多种颜色。

4 个答案: