javascript - 在 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];
} 

现在，缺点是它不太可维护。如果您向 ID 添加新元素，则必须相应地重新排列 part。

稍微好一点的解决方案是使用对象作为查找映射:

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];
}