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中删除其他图像（或隐藏它们）。检查图像是否存在。如果是，则将其删除（或隐藏）。

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

1 个答案: