для каждой ссылки изменить цвет в зависимости от массива - PullRequest
Новая
       16

для каждой ссылки изменить цвет в зависимости от массива

0 голосов
/ 10 июня 2011

У меня есть массив, содержащий ссылки цветов, и я хочу перейти по каждой ссылке в моей навигации и применить другой цвет в зависимости от порядка массива.

Я думаю, что это возможно, но я что-то упускаю.

Вот мой код 

    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 динамично заселено, но для этого, например, я выписал это).

Ответы [ 4 ]

4 голосов
/ 10 июня 2011

проблемы 

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 индексами) в выборе в качестве первого аргумента (idx). Использование оператора модуля (%) таким образом говорит: «верните 0 для первого элемента, 1 для второго ... 4 для пятого, 0 для шестого и т. Д.». Затем вы используете это значение, чтобы найти правильный цвет из массива.

Возвращаемое значение функции устанавливается как значение свойства CSS.

Небольшое замечание: если у вас такое же количество ссылок, которые нужно раскрасить, как вы делаете цвета, операция с модулем не нужна. Вы можете просто использовать return colourValue[idx];.

1 голос
/ 10 июня 2011

Попробуйте: 

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

Вы действительно можете сократить код таким образом, вам не нужно $.each.Кроме того, использование селектора таким, каким вы были, не только даст неправильные результаты, но и даст вам ужасную производительность.Вы обходили дом каждый раз, когда проходили по элементу массива.Лучше сначала получить ссылки, а затем применить к ним элементы массива, а не наоборот.

0 голосов
/ 10 июня 2011 
var colourValues = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];

$.each(colourValues, function(index, value){
   $(".nav li:first-child a").eq(index).css("color", value);
});
0 голосов
/ 10 июня 2011

Для одного вам не хватает "=" в var colourValue = [...

Другая проблема заключается в том, что вы назначаете "#" шестнадцатеричному цвету дважды.

Это должно работать: 

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

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