創建一個圖像數組放置在一個div

我想創建一個美元值（作爲圖像）發佈到HTML頁面。通過這個我的意思是，如果值是15.25，那麼在頁面上我需要有一個[1]，[5]，[。]，[2]和[5]的圖像的div。創建一個圖像數組放置在一個div

我試圖單獨採取每個數字，找到它的價值（和正確的圖像），並將其附加到我有一個空白的div。這是我一直在接近它：

//Get each digit and find the correct number image for it 
for (var x = 0; x < valueLength; x++) { 
    //Gets the current digit 
    tempDigit = value.toString().charAt(x); 

    //Find out what the digit is 
    switch (tempDigit) { 
     case "0": 
      //Gets image 
      img.src = "Images/Temp/0.png"; 
      //Append image to end of div 
      document.getElementById(valueDiv).appendChild(img); 
      break; 
     case "1": 
      //Gets image 
      img.src = "Images/Temp/1.png"; 
      //Append image to end of div 
      document.getElementById(valueDiv).appendChild(img); 
      break; 
     case "2": 
      //Gets image 
      img.src = "Images/Temp/2.png"; 
      //Append image to end of div 
      document.getElementById(valueDiv).appendChild(img); 
      break;

這繼續下去，直到案件「。」。（小數點）和我的html頁面上的valueDiv = 'valueDiv'。截至目前我得到所有正確的值，但只有最後一個圖像是可見的（在15.25的情況下，我會看到一個5）

有沒有一種方法不使用這種方法或更好的方式覆蓋以前的附加去做這個？

來源

2011-04-06 Stanley Cup Phil

是否必須使用圖像來完成？您可以使用Google字體或其他字體替換技術來做到這一點，還是用於防刮類型安全的圖像？ – bpeterson76 2011-04-06 15:11:51

他們希望通過圖像 – 2011-04-06 15:13:42

您每次都在重複使用相同的img對象。你必須爲每個循環迭代創建一個獨立的。 – 2011-04-06 15:40:17

目前，您每次都指向相同的圖像元素。你必須通過每次創建一個新的圖像元素的for循環：

img = document.createElement("img");

來源

2011-04-06 15:14:40 clmarquart

我已經在for循環之前的那行。對不起，我感到困惑 – 2011-04-06 15:19:55

您需要在循環內部的那條線*以在每次迭代中創建一個新的圖像元素。 – 2011-04-06 15:22:05

嘗試在for循環中移動該行。所以每次你使用一個新的圖像。 – clmarquart 2011-04-06 15:22:15

而不是創建圖像，並追加他們，你能代替寫出來的代碼轉換成字符串？您需要將一個像<img src="Images/Temp/1.png" alt="1" />這樣的字符串追加到另一個字符串中，然後將完成的字符串插入到容器div的innerHTML值中。

可能還有一種更簡單的方法來做到這一點 - 而不是一個長的case語句，用小數點替換爲「d」。將圖像命名爲0.png，1.png，2.png（等）。在此集合中包含「d.png」作爲小數點。然後遍歷字符串值，而不是開關/大小寫，從當前字符構造字符串值。這適用於您當前創建圖像或輸出字符串的方法：

value.replace(".", "d") 
//replace the decimal point with a letter d 

text = ''; 
for (var x = 0; x < valueLength; x++) { 
    //Gets the current digit 
    tempDigit = value.toString().charAt(x); 

    text = text + '<img src="Images/Temp/' + tempDigit + '.png" alt="' + value + '" />'; 
    //or, if you prefer, do: img.src = "Images/Temp/' + tempDigit + '.png"; 
}

無需開關/外殼。作爲獎勵，我將每個字符圖像的替代文本設置爲完整值 - 因此，當您將鼠標懸停在圖像的任何部分時，您將獲得完整值字符串的工具提示。

來源

2011-04-06 15:14:56

不要忘記'document.getElementById（valueDiv）.innerHTML = text;'最後。 – 2011-04-06 15:28:05

缺點是：（1）來自服務器的多個圖像請求（可以通過使用精靈來改進）; （2）文本將變得非常難以閱讀/理解屏幕閱讀器（傷害可訪問性，因爲該值將被讀作單獨圖像而不是單個數字）。否則，這種解決方案是可行的。很高興拔出開關，使代碼更清潔。 – RussellUresti 2011-04-06 15:48:08

@RussellUresti：我同意你的兩個缺點，但這是OP要求的。我不想自己做這件事 - 我希望搜索引擎儘可能清晰地閱讀價格。 – 2011-04-06 19:39:37

類似這樣的：http://jsbin.com/orene3/2/edit？

一些改進：只附加到文檔一次;使用文檔片段創建臨時持有者;使用精靈而不是單個圖像;並在span中輸入文本，然後使用文本縮進將其移出屏幕（以便訪問）。

來源

2011-04-06 15:34:58 RussellUresti

實際上，而不是使用div，你應該使用跨度，屏幕閱讀器應該讀出它們作爲一個單一的值 - 我相信使用div會導致他們一次讀出一個。我會更新我的示例以包含此內容。 – RussellUresti 2011-04-06 15:40:31

創建一個圖像數組放置在一個div

回答

相關問題