Question

我在下面有这个脚本，我希望它循环遍历每个锚点并给出背景

$c = ['85CC4C', 'D1FFCD', 'FF8D9D', '8A5949', 'CC8066'];
$('a').each(function(i){
$(this).css({'background':'#'+$c[i], 'color':getTintedColor($c[i], -55)});
});

为什么它在经过数组颜色后会停止？我希望它重复5种颜色。

Answer 1

如果您想循环显示颜色，请尝试使用$c[i % 5]代替$c[i]：

$c = ['85CC4C', 'D1FFCD', 'FF8D9D', '8A5949', 'CC8066'];
$('a').each(function(i){
    $(this).css({'background':'#'+$c[i % 5], 'color':getTintedColor($c[i % 5], -55)});
});

在each()循环内，i变量是每个锚标记的索引。但是，您的颜色阵列只有5种颜色。使用i % 5将始终在0和4之间给出一个数字，因此始终是颜色数组中的有效索引。

Answer 2

为什么它在经过数组颜色后会停止？

因为$c[i]会产生undefined，而不是从零开始索引。您可以使用modulo operator执行此操作：

$('a').each(function(i){
    var col = $c[i % $c.length];
    $(this).css({
        background: '#'+col,
        color: getTintedColor(col, -55)
    });
});

Answer 3

如果i值大于数组的长度，则 $ c [i]未定义 ..

数组有5个项目，您尝试为anchor分配6个项目值。

因此，当length大于数组时需要重置值（需要使用模运算符）。像这样的东西

$c = ['85CC4C', 'D1FFCD', 'FF8D9D', '8A5949', 'CC8066'];
$('a').each(function (i) {
    $(this).css({
        'background': '#' + $c[i % $c.length],
        'color': getTintedColor($c[i % $c.length], -55)
    });
});

<强> Check Fiddle

为什么each（）在通过数组后结束？

3 个答案: