我正在尝试生成一个数组，但是相同的id标签正在破坏html-javascript

Question

我整天都在努力。 在学习如何使它动态化之前，我想生成多个具有不同ID标签或类名而不是ID的div。 以较容易的为准。 目前，我的页面出现一个数组，其中每个div具有相同的ID，这是我遇到的问题。 请指教。

function byId(id) {
    return document.getElementById(id);
}

var txt = {
    "characters": [{
            "thumbn": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>",
            "fullName": "John Doe",
            "speci": "human male",
            "occup": "Web Personality",
            "cide": "Sleeper",
            "descr": "blah",
            "biog": "blarg",
            "allia": "chaos good",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/ban_two.jpg\"\/>"
    },

    {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Jane Doe",
            "speci": "human female",
            "occup": "Movie Producer",
            "cide": "Citric",
            "descr": "bluh",
            "biog": "blurg",
            "allia": "neutral",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
    },

    {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Canter Doma",
            "speci": "alienmale",
            "occup": "Chef",
            "cide": "Galv",
            "descr": "bleh",
            "biog": "blerg",
            "allia": "evil",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
    }]
};

var obj = txt;
//obj.toString();
byId("thumb").innerHTML = obj.characters[0,1,2].thumbn;
byId("fname").innerHTML = obj.characters[0,1,2].fullName;
byId("spec").innerHTML = obj.characters[0,1,2].speci;
byId("occu").innerHTML = obj.characters[0,1,2].occup;
byId("cid").innerHTML = obj.characters[0,1,2].cide;
byId("desc").innerHTML = obj.characters[0,1,2].descr;
byId("bio").innerHTML = obj.characters[0,1,2].biog;
byId("alli").innerHTML = obj.characters[0,1,2].allia;
byId("char").innerHTML = obj.characters[0,1,2].fullon;

http://jsfiddle.net/mn9LV/8/

Answer 1

你的数组不能那样工作

您拥有的结构为{[{},{},{}]} ，这意味着object { array [ object {}, object {}, object {} ] }

您编写的内容使用json和javascript不可能简单地实现

试一试

// John Doe
byId("thumb").innerHTML = obj.characters[0].thumbn;
byId("fname").innerHTML = obj.characters[0].fullName;
byId("spec").innerHTML = obj.characters[0].speci;
byId("occu").innerHTML = obj.characters[0].occup;
byId("cid").innerHTML = obj.characters[0].cide;
byId("desc").innerHTML = obj.characters[0].descr;
byId("bio").innerHTML = obj.characters[0].biog;
byId("alli").innerHTML = obj.characters[0].allia;
byId("char").innerHTML = obj.characters[0].fullon;

接下来是1

// Jane Doe
byId("thumb").innerHTML = obj.characters[1].thumbn;
byId("fname").innerHTML = obj.characters[1].fullName;
byId("spec").innerHTML = obj.characters[1].speci;
byId("occu").innerHTML = obj.characters[1].occup;
byId("cid").innerHTML = obj.characters[1].cide;
byId("desc").innerHTML = obj.characters[1].descr;
byId("bio").innerHTML = obj.characters[1].biog;
byId("alli").innerHTML = obj.characters[1].allia;
byId("char").innerHTML = obj.characters[1].fullon;

==编辑==

为了更好地满足您的需求（基于评论），这可能就足够了

将您的对象括在文字中，并建立在文字中过滤或构建html所需的功能

var obj = {
    txt: {
        "characters": [{
            "thumbn": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>",
            "fullName": "John Doe",
            "speci": "human male",
            "occup": "Web Personality",
            "cide": "Sleeper",
            "descr": "blah",
            "biog": "blarg",
            "allia": "chaos good",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/ban_two.jpg\"\/>"
        },

        {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Jane Doe",
            "speci": "human female",
            "occup": "Movie Producer",
            "cide": "Citric",
            "descr": "bluh",
            "biog": "blurg",
            "allia": "neutral",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
        },

        {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Canter Doma",
            "speci": "alienmale",
            "occup": "Chef",
            "cide": "Galv",
            "descr": "bleh",
            "biog": "blerg",
            "allia": "evil",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
        }]
    },
    byId: function(id) {
        return document.getElementById(id);
    },
    buildHtml: function(id) {
        this.byId("thumb").innerHTML = this.txt.characters[id].thumbn;
        this.byId("fname").innerHTML = this.txt.characters[id].fullName;
        this.byId("spec").innerHTML = this.txt.characters[id].speci;
        this.byId("occu").innerHTML = this.txt.characters[id].occup;
        this.byId("cid").innerHTML = this.txt.characters[id].cide;
        this.byId("desc").innerHTML = this.txt.characters[id].descr;
        this.byId("bio").innerHTML = this.txt.characters[id].biog;
        this.byId("alli").innerHTML = this.txt.characters[id].allia;
        this.byId("char").innerHTML = this.txt.characters[id].fullon;
    }
};

用法

var objectById = obj.byId(0);
// Or build html
obj.buildHtml(1);

Answer 2

不能100％地确定要执行的操作，但是快速浏览一下，您可能未按预期引用字符数组：

obj.characters[0,1,2].thumbn;

总是会给您数组中的第三个项目，因为在这种情况下, （，逗号）运算符将始终导致将值传递为2 。

如果您需要项1， obj.characters[0] ，项2 obj.characters[1]等。

为了进行扩展，javascript中一系列逗号的返回值将是最后的评估。 即：（ ('a',1020,'dog')将评估为'dog'。 (10,20,30) == 30 // true

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_Operator