0

ユーザーが消費した砂糖の量を入力し、この値が毎日の推奨砂糖摂取量にどのように対応するかを示すグラフィック メーターを生成するテスト ページを作成しています。

メーター自体は、私が 3 つの部分に分けたグラフィックです: 開始キャップ、中間、および終了キャップです。次のリンクを参照してください: 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/を作成しました

4

1 に答える 1

0

状態が変化するたびに、この関数を呼び出す必要があります。したがって、ユーザーが消費した砂糖の量を入力すると、そのイベントは次の関数を呼び出す必要があります。

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

もちろん、showbar()砂糖の量を持つパラメーターを関数に渡すことをお勧めします。

ただし、関数を呼び出すたびに、他の画像を DOM から削除する (または非表示にする) 必要があります。画像が存在するかどうかを確認します。存在する場合は、削除 (または非表示) します。

于 2012-08-03T17:52:53.093 に答える