javascript - 放置由javascript生成的同一图像的多个实例

Question

我正在制作一个测试页面，用户在其中输入他们消耗了多少糖分，然后生成一个图形表，向他们显示该值与每日推荐糖分摄入量的对应关系。

仪表本身是一个图形，我将其分为三个部分:开始端、中间端和结束端。请参阅以下链接:http://i.imgur.com/CfFI7.jpg

我的问题是，我当前运行的代码不希望将包含 div 附加到栏中间部分的多个实例。在这种情况下，我只需更改图形那部分的宽度就足够了，但我宁愿能够将图形复制 x 次，直到它填充适当数量的条。图形的每个部分(开始、中间和结束)都是 10px 宽。

注意:我正在尝试对其进行编码，以便它会根据我在 css 中给它的大小动态填充仪表(而不是使用固定宽度的条形/仪表)。

这是我的javascript:

function showbar() {
    //GRAPHICS OF BAR
    sugarbar = document.getElementById('bar1');
    bar_width = parseInt($('#bar1').css("width"))
    $('#bar1').css({
        "height": "10px", "width": "300px", "border-radius" : "4px", "border": "1px solid #666633", "background-color": "cccc66" });

    //CALCULATION OF SUGAR LEVELS
    sugarunit = (parseInt($('#bar1').css("width")))/100;
    sugaramount = sugarunit*data.sugar;


    //MUST SET IMAGE HEIGHT
    barheight = "10" 

    //VALUE ON BAR
    bar_start = new Image();
    bar_start.src = "startcap.png";
    bar_start.height = barheight; 


    bar_middle = new Image();
    bar_middle.src = "midbar.png";
    bar_middle.height = barheight; 

    bar_end = new Image();
    bar_end.src = "endcap.png";
    bar_end.height = barheight;

    //IF THE SUGAR INTAKE IS LESS THAN THE PIXEL WIDTH OF THE STARTING CAP
    if (sugaramount<bar_start.width) {
        bar_start.width=sugaramount;
        sugarbar.appendChild(bar_start);
        sugarbar.appendChild(bar_end);
    }

    //IF THE SUGAR INTAKE IS BETWEEN THE WIDTH OF THE STARTING CAP AND BEFORE THE END CAP CAN BEGIN
    else if (sugaramount>=bar_start.width) {
        sugarbar.appendChild(bar_start);

        i = Math.floor(sugaramount-(bar_start.width+bar_end.width));

        for (j=1; j<=i; j++) {
            sugarbar.appendChild(bar_middle);
        }

        bar_middle.width = sugaramount%10;
        sugarbar.appendChild(bar_middle);
        sugarbar.appendChild(bar_end);
    }
}

编辑:澄清一下，appendChild 不想包含我创建的图像的多个实例。它只显示一次，即使我写了 sugarbar.appendChild(bar_middle);多次。这是有原因的吗？

EDIT2:我制作了一个 jsfiddle http://jsfiddle.net/7W6HY/1/如果您想尝试使用它

Answer 1

每次状态更改时，您都需要调用此函数。因此，当用户输入消耗了多少糖时，该事件需要调用此函数:

var input = document.getElementById('yourinput');
input.addEventListener('blur', showbar, false);

当然，我建议将参数传递给具有糖量的 showbar() 函数。

不过，每次调用该函数时，您都需要从 DOM 中删除(或隐藏)其他图像。检查图像是否存在。如果是，则将其删除(或隐藏)。