Question

我有一个包含颜色的hrefs的数组，我想浏览导航中的每个链接，并根据数组的顺序应用不同的颜色。

我认为这是可能的，但我错过了一些东西。

这是我的代码

    var colourValue = [ "fff", "000", "FF6600", "FF00FF", "FFFF00" ];
//this is how console displays the array, I have no control over the values.
        var values = [];
        values.push(colourValue);
        console.log(values);

         $.each(values, function(index, value) { 
             var colorStyle = "#" + value +"";
             $(".nav li:first-child").find("a").css("color",colorStyle);
            });

不知道我错过了什么，有什么提示吗？非常感谢（colourValue是dynaimcally人口，但为此我写了出来。）

Answer 1

问题

var colourValue [ "#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00" ]
var values = [];
values.push(colourValue);

这是一个非常奇怪的代码。你定义一个数组（实际上，你没有 - 它缺少=）并给它一些值，然后创建另一个数组并将第一个数组的每个值附加到第二个数组。这里不需要两个数组，你可以循环遍历原始数组。

var colorStyle = "#" + value +"";

那会##fff，这显然不是你想要的。您只需使用value访问该值。

$(".nav li:first-child").find("a").css("color",colorStyle);

这是一个大问题。它循环遍历values的所有成员，并且在每次迭代时将每个链接设置为具有数组当前成员的颜色。但是，您的选择只会在第一个li元素中包含链接，这显然不是您想要的。您需要.nav li a。

解决方案

jQuery有很多很好的方法来处理选择。你可能想要这样的东西：

var colourValue = [ "#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00" ]
$('.nav li a').css('color', function(idx) {
    return colourValue[idx % colourValue.length];
});

这为选择中的每个元素运行一个函数。该函数接收选择中元素的位置（0-indexed）作为其第一个参数（idx）。以这种方式使用模数运算符（%）表示“第一项返回0，第二项返回1，第五项返回4，第六项返回0，等等”。然后使用此值从数组中找到正确的颜色。

将函数的返回值设置为CSS属性的值。

快速说明：如果要使用相同数量的链接进行着色，则不需要进行模数操作。您可以使用return colourValue[idx];。

Answer 2

试试这个：

var yourArray = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];
$('.nav a').each(function(i) {
    $(this).css("color", yourArray[i]);
});

你可以通过这种方式真正减少代码，你不需要$.each。另外，按照你的方式做一个选择器不仅会返回错误的结果，而且会给你带来糟糕的表现。每次走过一个数组项时，你都在遍历dom。最好先获取链接，然后将数组项应用于它们，而不是相反。

Answer 3

如果你错过了var colourValue = [...

上的“=”

另一个问题是你将“＃”分配给颜色十六进制两次。

这应该有效：

var colourValues = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];

$.each(colourValues, function(index, colorStyle){
   $(".nav li:first-child").find("a").css("color", colorStyle);
});

Answer 4

var colourValues = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];

$.each(colourValues, function(index, value){
   $(".nav li:first-child a").eq(index).css("color", value);
});

对于每个链接，基于数组更改颜色

4 个答案:

问题

解决方案