Question

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>

目标：点击欧洲<li>后，将欧洲一词传递到我的区域函数中，然后将其连接起来以生成Animals.Europe

这是为了使用for(var index in Animals.Europe)循环识别顶部对象结构中的数组。为什么产生Animals.Europe的串联的处理方式与我输入的方式不同？

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

Answer 1

“动物”。 + a只是一个字符串值，例如“Animals.Europe”，与Animals.Europe不同。如果您将第一行更改为var b = Animals[a];，则应该全部设置。

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

Answer 2

为什么产生Animals.Europe的串联的处理方式与我输入的方式不同？

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

您可以使用方括号表示法来访问对象属性。这意味着您可以改为编写var b = Animals[a]，从动物中检索属性a。您可以通过这种方式阅读有关使用对象的更多信息on this MDN page

Answer 3

您可以使用以下

访问欧洲酒店

Animals[a]

此外，您还打电话给＆＃34;欧洲＆＃34;当你应该打电话＆＃34; region＆＃34;

时起作用

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

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

Now Animals [＆＃39; Europe＆＃39;]提供了一系列对象，您最终可以存储其他属性。因此，如果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)
}

使用串联和传递的参数循环遍历数组

3 个答案: