1 
var Animals = {
    "Europe": { "weasel.jpg": "squeak", "cow.jpg": "moo"},
    "Africa": { "lion.jpg": "roar", "gazelle.jpg": "bark"},         
};

function region(a){
    var b = "Animals."+a;
    for(var index in b) {
        var target = document.getElementById('div1');
        var newnode = document.createElement('img');
        newnode.src = index;
        target.appendChild(newnode)
    }
}

相关的 HTML

<li onclick="europe('Europe')">Europe</li>

目标：点击 Europe <li>，将 Europe 这个词传递到我的 region 函数中，然后将它连接起来产生 Animals.Europe

这是为了使用for(var index in Animals.Europe)循环在顶部的对象结构中识别一个数组。为什么产生 Animals.Europe 的连接没有像我输入的那样处理？

此外，您可以看到我使用数组来存储不同动物的图像源和描述。使用我有限的编码知识，这就是我能想到的。是否有更简单的方法来存储图像/描述数据以便以 HTML 格式生成？

4

3 回答 3

1

“动物。” + a 只是一个字符串值，例如“Animals.Europe”，它与 Animals.Europe 不同。如果您将第一行更改为var b = Animals[a];，您应该已准备就绪。

编辑：正如 elclanrs 指出的那样，它应该是region('Europe')，而不是europe('Europe')。

于 2013-01-06T06:03:30.537 回答
1

为什么产生 Animals.Europe 的连接没有像我输入的那样处理？

在这种情况下，变量b只是一个字符串（“Animals.Europe”），它被视为任何其他字符串（即字符列表）。这意味着当您尝试遍历它时 ( for(index in b))，您将遍历一个简单的字符列表。

您可以做的是使用方括号表示法访问对象属性。这意味着您可以改为编写，从 Animalsvar b = Animals[a]中检索属性。您可以在此 MDN 页面上a阅读有关以这种方式处理对象的更多信息

于 2013-01-06T06:05:17.933 回答
0

您可以使用以下方式访问欧洲财产

Animals[a]

当你应该调用“区域”时，你也在调用“欧洲”函数

您不是将动物存储在数组中，而是存储在以图像名称作为键的对象中。通常您会希望使用相关名称作为键。例如，如果您想要每个大陆的动物数组

var Animals = {
    "Europe": [{ 
      imageSrc: "weasel.jpg",
      cry: "squeak"
    },{
      imageSrc: "cow.jpg",
      cry: "moo"
    }],
    "Africa": [{
      imageSrc: "lion.jpg",
      cry: "roar"
    },{
      imageSrc: "gazelle.jpg",
      cry: "bark"
    }]         
};

现在 Animals['Europe'] 给出了一个对象数组，你最终可以在其中存储其他属性。所以如果 b 是一个数组，你的循环现在看起来像：

var b = Animals['Europe'];

for(var i=0; i < b.length; i++) {
    var target = document.getElementById('div1');
    var newnode = document.createElement('img');
    var animalData = b[i];   // The array item is now an object
    newnode.src = animalData.imageSrc;
    target.appendChild(newnode)
}
于 2013-01-06T06:11:00.170 回答