Присвоить значение переменной из JS массива на основе ключевых

У меня есть переменная, которая принимает значение из атрибута ID текущего объекта, он всегда будет выглядеть как filtercolor-красный:Присвоить значение переменной из JS массива на основе ключевых

$('.facet-options-list li input[id*=filtercolor]').each(function() { 
    var filterColor = $(this).attr('id'); 
    ... 
});

У меня также есть массив, который содержит список возможных идентификаторов и соответствующий ему шестнадцатеричный код:

var activeFilterBg; 
var filterBgColor = []; 
filterBgColor = { 
    filtercolor-black:  '#171710', 
    filtercolor-blue:  '#4C94B6', 
    filtercolor-brown:  '#50443D', 
    filtercolor-gold:  '#F6D069', 
    filtercolor-green:  '#96B14D', 
    filtercolor-grey:  '#A8AAA5', 
    filtercolor-orange:  '#DB5E46', 
    filtercolor-pink:  '#E78EB1', 
    filtercolor-purple:  '#59547E', 
    filtercolor-red:  '#D22200', 
    filtercolor-silver:  '#EBEBEB', 
    filtercolor-white:  '#FFF' 
};

То, что я хотел бы сделать, это взять filterColor и назначить activeFilterBg соответствующий код HEX из filterBgColor. Я мог бы сделать это с switch, но это кажется неряшливым и дает много места для ошибок в будущем.

Есть ли у меня возможность как-то найти правильный ключ, а затем назначить переменную на основе этого?

источник

2015-10-22 Josh Burdick

'уага color = filterBgColor [filterColor] ' – tymeJV

Как указывает Гуффа ниже, то, что вы здесь делаете, назначает пустой массив переменной (' var filterBgColor = []; '), а затем * бросает ее * и назначает объект той же переменной ('filterBgColor = {...}'). Важно знать различие между массивами и объектами в JavaScript. Вы должны использовать только массивы, если вам нужны цифровые клавиши, например. 'var a = [" A "," B "," C "]; console.log (а [0]); // => "A". В противном случае вы должны использовать Object: 'var o = {foo:" X ", bar:" Y ", ...}; console.log (o.foo); // => «X» ' –

Спасибо @ Йордан, я все еще только начинаю входить в JS, это действительно полезное различие. –

Это не массив, это объект. Вы назначаете массив переменной, но затем вы немедленно заменяете ее объектом. Объект хорошо подходит для этого, поэтому просто пропустите этот массив. (Обратите внимание, хотя, как Джордан отметил, что имена параметров должны быть указаны, если они содержат дефис.)

Вы можете использовать синтаксис кронштейна для доступа к свойствам объекта, используя переменный:

var activeFilterBg; 
var filterBgColor = { 
    'filtercolor-black':  '#171710', 
    'filtercolor-blue':  '#4C94B6', 
    'filtercolor-brown':  '#50443D', 
    'filtercolor-gold':  '#F6D069', 
    'filtercolor-green':  '#96B14D', 
    'filtercolor-grey':  '#A8AAA5', 
    'filtercolor-orange':  '#DB5E46', 
    'filtercolor-pink':  '#E78EB1', 
    'filtercolor-purple':  '#59547E', 
    'filtercolor-red':  '#D22200', 
    'filtercolor-silver':  '#EBEBEB', 
    'filtercolor-white':  '#FFF' 
}; 

$('.facet-options-list li input[id*=filtercolor]').each(function() { 
    var filterColor = $(this).attr('id'); 
    activeFilterBg = filterBgColor[filterColor]; 
});

источник

2015-10-22 18:26:12 Guffa

+1 для указания, что массив не нужен. Однако стоит отметить, что имена свойств с тире в них (например, 'filtercolor-black') должны быть указаны:' var filterBgColor = {"filtercolor-black": "# 171710", ...}; '. –

@ Джордан: Хороший улов, я не думал об этом при копировании кода. – Guffa

Проверьте объект сначала с hasOwnProperty - и если имущество существует, используйте его!

$('.facet-options-list li input[id*=filtercolor]').each(function() { 
    var filterColor = this.id; //$(this).attr('id'); 
    var color; 
    if (filterBgColor.hasOwnProperty(filterColor) { 
     color = filterBgColor[filterColor]; 
    } else { 
     color = "#FFF"; //not found 
    } 
});

источник

2015-10-22 18:19:11 tymeJV

отображение идентификатора в цвет должен быть простым, как

var filterColor = $(this).attr('id'); 
var hexCode = filterBgColor[filterColor]; 
//then do whatever with the hexCode

источник

2015-10-22 18:19:26

Присвоить значение переменной из JS массива на основе ключевых

ответ

Смежные вопросы