Question

我正在尝试创建一个美元值（作为图像）以发布到html页面。我的意思是，如果值为15.25，那么在页面上我需要一个带有[1]，[5]，[。]，[2]和[5]图像的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）

有没有办法不使用此方法覆盖以前的追加或更好的方法来执行此操作？

Answer 1

目前，您每次都指的是相同的图像元素。每次通过for循环时都必须创建一个新的图像元素：

img = document.createElement("img");

Answer 2

您可以将代码写入字符串，而不是创建图像并附加它们吗？您将<img src="Images/Temp/1.png" alt="1" />之类的字符串附加到另一个字符串中，然后将完成的字符串插入到容器div的innerHTML值中。

也许有一种更简单的方法可以做到这一点 - 而不是长例句，用“d”做小数点的字符串替换。将您的图像集命名为0.png，1.png，2.png（等），就像您已有的那样。在此集合中包含小数点的“d.png”。然后循环遍历字符串值，而不是switch / case，从当前字符构造字符串值。这适用于您当前创建图像或输出字符串的方法：

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

无需开关/箱。作为奖励，我将每个角色图像的替代文字设置为完整值 - 因此当您将鼠标悬停在图像的任何部分上时，您将获得完整值字符串的工具提示。

Answer 3

像这样：http://jsbin.com/orene3/2/edit？

一些改进：只附加一次文件;使用文档片段创建临时持有者;使用精灵而不是单个图像;并在span内输入文本，然后输入文本缩进以将其移出屏幕（以便访问）。

创建一个图像数组放在div中

3 个答案: