Question

我目前正在使用jQuery函数为每个元素随机分配一个背景颜色列表，其中包含一个分配给它的CSS类列表之一：

$(document).ready(function() {
    var colors = ['color1', 'color2', 'color3'];
    $('.class1, .class2').each(function () {
        var hue = colors[Math.floor(Math.random() * colors.length)];
        $(this).css("background-color", hue);
    });
});

我想改变函数，以便不是随机分配颜色，而是按顺序分配它们，当有更多的元素分配颜色而不是要分配的颜色时，循环回到颜色数组的开头，即：

<element1 class="class1" style="background-color: color1;"></element1>
<element2 class="class2" style="background-color: color2;"></element2>
<element3 class="class1" style="background-color: color3;"></element3>
<element4 class="class2" style="background-color: color1;"></element4>
<element5 class="class1" style="background-color: color2;"></element5>

非常感谢任何关于从哪里开始的建议！

Answer 1

试试这个：

$(document).ready(function () {
    var colors = ['#f00', '#0f0', '#00f'];
    var x = 0;
    $('.class1, .class2').each(function () {
        var hue = colors[x];
        x++;
        if (x == colors.length) {
            x = 0;
        }
        $(this).css("background-color", hue);
    });
});

演示 here

我没有使用传统的for循环，但我自己创建了一个变量x并将其添加到.each()上，如果它到达颜色数组的末尾，我就给它再次0（零）值重新开始。

这是你想要的吗？

jQuery顺序应用CSS样式

1 个答案:

演示 here