Цикл массива цветов с помощью jQuery

Question

Цикл массива цветов с помощью jQuery

0

Я пытаюсь дать каждому div другой цвет фона. Вот мой текущий код:

var imgColours = ['#FCCF94', '#C4C9E5', '#ADE3D6'];

for (i=0; i < imgColours; i++) {
        $('.img').css({backgroundColor: imgColours[0]});
}

Однако я не совсем уверен, где это происходит. Я понимаю, что, возможно, слишком просто работать, но, на мой взгляд, это имеет смысл. Может ли кто-нибудь указать мне в правильном направлении?

taseenb 13 дек. 2013, в 22:44

Источник

0

i < imgColours; должно быть, i < imgColours.length; и {backgroundColor: imgColours[i]} должно быть {"backgroundColor": imgColours[0]} . Но даже в этом случае это произойдет так быстро, что вы увидите только последний цвет.
j08691 13 дек. 2013, в 21:32

Теги:

javascript

jquery

4 ответа

Ещё вопросы

i < imgColours; должно быть, i < imgColours.length; и {backgroundColor: imgColours[i]} должно быть {"backgroundColor": imgColours[0]} . Но даже в этом случае это произойдет так быстро, что вы увидите только последний цвет.

taseenb · Answer 1 · 2013-12-13T19-11-00.000Z

В вашем коде есть некоторые ошибки.

Вероятно, это то, что вы хотели:

// V1 : Basic
var imgColours = ['#FCCF94', '#C4C9E5', '#ADE3D6'];
for (var i=0; i < imgColours.length; i++) {
    $('.img:eq('+i+')').css({backgroundColor: imgColours[i]});
}

Но если вы хотите получить случайный цвет из своего массива, для любого количества div, а также оптимизировать ваш код jQuery немного для лучшей производительности:

// V2 : random colors
var $imgs = $('#boxes1').find('.box'),
    imgsCount = $imgs.length,
    coloursCount = imgColours.length;

for (var i=0; i < imgsCount; i++) {
    var rnd = Math.floor(Math.random() * coloursCount),
        color = imgColours[rnd];
    $imgs.eq(i).css({backgroundColor: color});
}

Или, если вы хотите пересечь цвета, следуя порядку массива, просто измените цикл:

// V3 : sequential colors
// Add V2 variables here

for (var i=0; i < imgsCount; i++) {
    var color = imgColours[i%coloursCount];
    $imgs.eq(i).css({backgroundColor: color});
}

ОБНОВЛЕНО FIDDLE: http://jsfiddle.net/Uy2FX/12/

Для некоторых очень простых советов по производительности селекторов jQuery: http://www.sitepoint.com/efficient-jquery-selectors/

Sterling Archer · Answer 2 · 2013-12-13T20-00-00.000Z

Вам нужно использовать imgColours.length

Цикл for не знает, как долго массив будет в противном случае

Изменение: какая точка в этом цикле, если вы в конечном итоге используете imgColours[0]? Если вы хотите зацикливать каждый цвет, используйте i вместо 0.

И в любом случае, это не приведет к разному фону на div.

Попробуйте выбрать className (я собираюсь использовать vanilla.js, потому что это просто)

var elements = document.getElementsByClassName("img");
for (var i = 0; i<elements.length; i++) {
    var color = imgColours[Math.floor(Math.random()*imgColours.length)]; //get a RANDOM color change me if needed
    elements[i].style.backgroundColor = color;
}

Благодарю. У меня есть следующий код: jsfiddle.net/Uy2FX/6 Я бы хотел, чтобы цвета проходили через весь массив блоков, а не просто останавливались после 3. Возможно ли это с помощью оператора%? (я% что-то. длина)

Justin Wood · Answer 3 · 2013-12-13T19-58-00.000Z

Вы всегда присваиваете imgColours[0] КАЖДОМУ div. Я думаю, что вы ищете imgColours[i]

Вам также понадобится использовать imgColours.length, чтобы сообщить вашему циклу, как долго будет массив.

Вы также захватываете все элементы HTML с классом img, поэтому каждый раз они будут меняться.

Чтобы захватить каждый элемент отдельно, вы можете использовать селектор nth-of-type CSS. В основном вы можете просто сделать что-то вроде

$(".img:nth-of-type(" + i + ")")

Аааа спасибо Что я должен использовать, чтобы получить каждый IMG по отдельности?
@tmyie Я обновил свой ответ с помощью селектора nth-of-type .

Vash The Stampede · Answer 4 · 2013-12-13T19-47-00.000Z

Как насчет этого?

var ec = 0;
var i = 0;
for(ec; ec < elements.length; ec++, i++) {
   elements[ec].style.backgroundColor = imgColours[i];

    if(i == (imgColours.length - 1)) i = -1;

}

http://jsfiddle.net/y2dq3/