I'；我试图生成一个数组，但是相同的id标记破坏了html-javascript

我一整天都在为此而挣扎。在我学习如何使这个动态之前，我想用不同的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;

函数byId（id）{
返回文档.getElementById（id）；
}
var txt={
“字符”：[{
“拇指”：“，
“全名”：“约翰·多伊”，
“speci”：“人类男性”，
“占领者”：“网络人格”，
“犯罪现场”：“睡眠者”，
“描述”：“废话”，
“传记”：“布拉格”，
“allia”：“混沌好”，
“富隆”：”
},
{
“拇指”：“，
“全名”：“无名氏”，
“speci”：“人类女性”，
“占领者”：“电影制片人”，
“谋杀”：“柠檬”，
“描述”：“蓝色”，
“传记”：“模糊”，
“allia”：“中立”，
“富隆”：”
},
{
“拇指”：“，
“全名”：“Canter Doma”，
“speci”：“alienmale”，
“占领者”：“厨师”，
“谋杀”：“Galv”，
“描述”：“bleh”，
“传记”：“blerg”，
“allia”：“邪恶”，
“富隆”：”
}]
};
var obj=txt；
//对象toString（）；
byId（“thumb”）.innerHTML=obj.characters[0,1,2].thumbn；
byId（“fname”）.innerHTML=obj.characters[0,1,2]。全名；
byId（“spec”）.innerHTML=obj.characters[0,1,2].speci；
byId（“ocu”）.innerHTML=obj.characters[0,1,2].ocup；
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；

---

您的阵列不是这样工作的

您拥有的结构是

{[{}，{}，{}]}

，这意味着

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

---

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

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

将始终为您提供数组中的第三项，因为您使用

，

（逗号）运算符在这种情况下将始终导致传递为

2

的值

如果需要项目1、

obj.字符[0]

、项目2

obj.字符[1]

，等等

为了扩展，javascript中一系列逗号的返回值将是最后一次求值。例如：

（'a'，1020，'dog'）

将计算为'dog'<代码>（10,20,30）=30//true

---

看了看小提琴，我还是有点不清楚问题是什么/你想做什么。我没有看到任何重复的ID。您是在尝试创建多张卡片，每个角色一张，还是尝试使用一张卡片和另一个角色的统计数据替换其内容，或者其他什么？我希望所有对象都以html生成，而不仅仅是数组中的最后一张。我刚刚意识到我把事情搞砸了，但我不知道如何解决它。html是静态的，无论数组中有多少对象，我每次都需要以某种方式生成具有唯一id的块！我真的很想找到一种更干净的方法，通过I++的东西将每个数组传递给一个空的数组，但我正在和术语作斗争。我认为一次显示一个字符是可以的…我只是想创建一种方式，在其中切换。我不能以某种方式滚动每个字符[]吗？请参阅使用文字更新，如果要滚动字符，请使用for循环，您可以使用foreach，但它是ECMAScript 5，并不总是与所有浏览器兼容。你能不能给我看看所有能用的东西。如果我不明白的话。对不起，我的byId函数坏了，我现在已经修好了。你能再试一次吗？

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