Использование значения массива в качестве имени массива

Question

Я использую 5 массивов и 2 цикла FOR для создания набора div на странице, но внутренний цикл работает неправильно и возвращает НЕ УКАЗАННЫЕ для некоторых элементов. Я знаю, причина в том, что, поскольку она использует длину фактического имени цвета [красный (3), оранжевый (6), зеленый (5), синий (4)] вместо фактической длины этих массивов.

Как использовать фактическое имя цвета из первого массива (цветов) динамически со вторым именем массива. Что я пропущу, пожалуйста ???

var colours = ["red", "orange", "green", "blue"]; 
var red = ["item1", "item2", "item3", "item4"]; 
var orange = ["item5", "item6"]; 
var green = ["item7", "item8", "item9", "item10", "item11"]; 
var blue = ["item12"]; 
//generate coloured boxes 
for (var i = 0; i < colours.length; i++) { 
    var colour = colours[i]; 
    $("<div class='box " + colour + "' id='" + colour + "'>").appendTo('#boxes'); 
    //generate items in boxes 
    for (var j = 0; j < colours[i].length; j++) { 
     $("<div id='" + red[j] + "'>" + red[j] + "</div>").appendTo("#" + colours[i]); 
    } 
    $("</div>").appendTo('#boxes'); 
} 

Answer 1

Это плохое программирование; Вы, возможно, потребуется в конечном итоге с помощью eval:

var colours = ["red", "orange", "green", "blue"]; 
var red = ["item1", "item2", "item3", "item4"]; 
var orange = ["item5", "item6"]; 
var green = ["item7", "item8", "item9", "item10", "item11"]; 
var blue = ["item12"]; 

Было бы лучше, если бы вы создать словарь названий цветов и их элементов (и использовать функции JQuery для создания элементов):

var colours = ["red", "orange", "green", "blue"]; 
var colourValues = { 
    red: ["item1", "item2", "item3", "item4"], 
    orange: ["item5", "item6"], 
    green: ["item7", "item8", "item9", "item10", "item11"], 
    blue: ["item12"] 
}; 
for (var i = 0; i < colours.length; i++) { 
    var colour = colours[i]; 
    var colourValue = colourValues[colour]; 
    var $box = $("<div></div>", { "class": "box " + colour, id: colour }).appendTo("#boxes"); 
    for (var j = 0; j < colourValue.length; j++) { 
     $("<div></div>", { id: colourValue[j] }).text(colourValue[j]).appendTo($box); 
    } 
}