Question

我整天都在苦苦挣扎。在我学习如何使这个动态之前，我想生成多个div，使用差异id标签或类名而不是id。哪个更容易。目前我有一个问题，我的页面吐出一个数组，其中每个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;

总是会给出数组中的第3项，因为在这种情况下，,（逗号）运算符的使用总是会导致值传递为2。

如果您想要第1项，obj.characters[0]，第2项obj.characters[1]等

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

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

2 个答案: