0

我目前正在使用 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>

任何关于从哪里开始的建议将不胜感激！

4

1 回答 1

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

演示在这里

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

这是你要找的吗？

于 2013-08-10T22:11:54.313 回答