Ссылки на переменные в массиве Javascript

Question

Простой вариант: У меня есть список массивов, которые ссылаются на элементы страницы, например, так:

var listOfArrays = ["header", "middle", "footer"]; 

и массивы как и для каждого из них:

var header = ["red", "blue", "green"]; 
var middle = ["carrot", "cucumber", "asparagus"]; 
var footer = ["earth", "air", "water"]; 

Я бы например, чтобы динамически заменить HTML-элементы страницы, пропустив массив, например:

for(i=0; i<listOfArrays.length; i++) { 
    document.getElementById(listOfArrays[i]).innerHTML({listOfArrays[i]}[cycleNumber]); 
} 

Вывод, который мне хотелось бы, - это три элемента, которые изменились, чтобы читать «красный», «морковь» и «земля» соответственно (по крайней мере, для первого цикла, что все, что меня беспокоит). Как мне это закодировать?

Here - это jsfiddle с моделью того, что я пытаюсь сделать.

Answer 1

Одно из решений заключается в создании дополнительно массив, содержащий другие массивы:

var IDs = ["header", "middle", "footer"]; 

var parts = [ 
    ["red", "blue", "green"], 
    ["carrot", "cucumber", "asparagus"], 
    ["earth", "air", "water"] 
]; 

for (var i=0; i < IDs.length; i++) { 
    document.getElementById(IDs[i]).innerHTML = parts[i][cycleNumber]; 
} 

Теперь, недостатком является то, что это не очень ремонтопригодны. Если вы добавите новый элемент в IDs, вам необходимо соответствующим образом перестроить parts.

Несколько лучшим решением является использование объекта в качестве карты поиска:

var IDs = ["header", "middle", "footer"]; 

var parts = { 
    header: ["red", "blue", "green"], 
    middle: ["carrot", "cucumber", "asparagus"], 
    footer: ["earth", "air", "water"] 
}; 

for (var i=0; i < IDs.length; i++) { 
    var ID = IDs[i]; 
    document.getElementById(ID).innerHTML = parts[ID][cycleNumber]; 
}