创建一个图像数组放置在一个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

回答

相关问题