我試圖生成一個數組，但相同的id標籤打破了HTML - javascript

我一直在努力與這一整天。在我學習如何使這種動態變化之前，我想用不同的id標籤或類名來代替id來生成多個div。無論哪個更容易。目前我有一個問題，我的頁面吐出一個數組，其中每個div都有相同的ID。請指教。我試圖生成一個數組，但相同的id標籤打破了HTML - javascript

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/

來源

2014-01-09 riotgear

在小提琴來看，我仍然在這個問題上是什麼/你想要做什麼有點模糊。我沒有看到任何重複的ID。你是否正在嘗試製作多張卡片，每個角色一張，或者你想要拿出一張卡片並將其內容替換爲另一個角色的屬性或其他內容？ –

我希望所有的對象在html中生成，而不僅僅是數組中的最後一個。我只是意識到我搞砸了，但我不知道如何解決。 html是靜態的我需要以某種方式每次生成一個獨特的ID塊，然而我的數組中有很多對象！ – riotgear

您的數組不一樣，

你的結構是{[{},{},{}]}工作，這意味着 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);

來源

2014-01-09 21:11:37

我真的很想找到一種更清晰的方式來傳遞每個通過i ++事物空的數組，但我正在努力使用術語。我認爲一次顯示很好...我只是想創造一種方式來切換它們。 – riotgear

不能我只是滾動每個字符[]莫名其妙？ – riotgear

如果你想在字符中滾動使用for循環，你可以使用foreach，但這是EcmaScript5，並不總是與所有瀏覽器兼容。 –

不是100％確定你想要做什麼，但看一眼，你可能不引用字符數組，你打算：

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

由於在這種情況下對,（逗號）運算符的使用將始終導致傳遞的值爲2，因此將始終爲您提供陣列中的第3項。

如果你想第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

來源

2014-01-09 21:12:49 Rell

我試圖生成一個數組，但相同的id標籤打破了HTML - javascript

回答

相關問題