застрял на велосипеде через несколько цветов.

Question

застрял на велосипеде через несколько цветов.

0

Я пытаюсь найти альтернативный цвет фона div. У меня есть 11 полных цветов, и вам нужно циклически перебирать их, когда они показывают один и тот же цвет дважды подряд. Я посмотрел на nth-child в css без каких-либо результатов, получив один и тот же цвет в нескольких строках. Теперь я пытаюсь сделать это через циклы в 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]; 
        }
    }
}

DevMaceika 23 сен. 2013, в 20:59

Источник

Теги:

javascript

html

css

4 ответа

0

Другим вариантом является чистый 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;
}

и т.д

Barbara Laird 23 сен. 2013, в 17:02

0

Кажется, вы используете сочетание 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;
    });

}

Barbara Laird 23 сен. 2013, в 16:33

0

JQuery это JavaScript.
Bart 25 сен. 2013, в 13:13
0

@Bart - Если бы кто-то не использовал библиотеку jQuery, добавление jQuery просто для выполнения простой функции было бы излишним. Это можно было бы легко сделать с помощью простого javascript.
Barbara Laird 25 сен. 2013, в 14:22

0

Вы можете создать полезный класс, чтобы помочь в велоспорте.

Вот пример такого класса. Вы можете передать ему массив и бесконечно прокручивать его, вызывая 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();
}

Bart 23 сен. 2013, в 16:30

Ещё вопросы

@Bart - Если бы кто-то не использовал библиотеку jQuery, добавление jQuery просто для выполнения простой функции было бы излишним. Это можно было бы легко сделать с помощью простого javascript.

Niet the Dark Absol · Accepted Answer · 2013-09-23T16-10-00.000Z

Кажется, вы эффективно устанавливаете цвет фона в последний цвет в списке. Почему бы не попробовать это:

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

Это будет проходить через определенные цвета, и благодаря оператору % он зациклится до начала вашего списка, если он пройдет мимо конца.

Большое спасибо, прежде чем вы ответили, у меня был прорыв с оператором%.