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

我喜欢的输出是将三个元素分别改为阅读＆＃34;红色＆＃34;，＆＃34;胡萝卜＆＃34;和＆＃34;地球＆＃34;至少对于第一个周期，这是我所关心的）。我该如何编码？

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

在Javascript数组中引用变量

1 个答案: