放置由javascript生成的同一圖像的多個實例

Question

我正在制作一個測試頁，用戶輸入消耗的糖量，然后生成一個圖形儀表，向他們顯示該值與每日推薦糖攝入量的對應關系。

儀表本身就是一個圖形，我將其分為三個部分：開始蓋，中間蓋和結束蓋。 請參閱以下鏈接： http : //i.imgur.com/CfFI7.jpg

我的問題是，我當前正在運行的代碼不想在包含div的欄中間部分添加多個實例。 在這種情況下，僅改變圖形那部分的寬度就足夠了，但是我寧願能夠將圖形重復x次，直到它填滿適當數量的條形。 圖形的每個部分（開頭，中間和結尾）均為10像素寬。

注意：我正在嘗試對其進行編碼，以便它將根據我在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中刪除其他圖像（或隱藏它們）。 檢查圖像是否存在。 如果是這樣，則將其刪除（或隱藏）。