Question

我试图给每个div一个不同的背景颜色。这是我目前的代码：

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

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

但是，我不太确定这是哪里出错的。我知道这可能太简单了，但在我看来它是有道理的。有人能指出我正确的方向吗？

Answer 1

您的代码中存在一些相关错误。

这可能就是你想要做的事情：

// 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});
}

更新后的提问：http://jsfiddle.net/Uy2FX/12/

有关jQuery选择器性能的一些非常基本的技巧：http://www.sitepoint.com/efficient-jquery-selectors/

Answer 2

您需要使用imgColours.length

for循环不知道数组有多长

编辑：如果你最终使用imgColours[0]，那么for循环的重点是什么？如果您想循环显示每种颜色，请使用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;
}

Answer 3

您总是将imgColours[0]分配给每个div。我认为你要找的是imgColours[i]

您还需要使用imgColours.length来告诉您的循环数组有多长。

您还使用img类抓取所有HTML元素，因此每次都会更改所有这些元素。

要单独获取每个元素，可以使用CSS nth-of-type选择器。基本上你可以做像

这样的事情

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

Answer 4

这个怎么样？

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/

使用jQuery循环颜色数组

4 个答案: