0

全体を通して複数の ID に棒グラフ/進行状況バーを作成しようとしています。でも、なぜかひっかかる。

        var bar = document.getElementById("chart1", "chart2", "chart3");
        var progress = document.getElementById("progress1", "progress2", "progress3").innerHTML;
        function setProgress(percent){
            bar.style.width = percent + "%";

            if (percent > 70)
                bar.className = "graph graph-green";
            else if (percent > 40)
                bar.className = "graph graph-yellow";
            else if (percent > 0)
                bar.className = "graph graph-red";
        }

        var interval = setInterval(
            function(){
                setProgress(progress);
            }, 100);

どんな助けでも素晴らしいでしょう。

4

2 に答える 2

1

Blender が言ったようにgetElementById、単一の引数のみを受け入れ、要素を返します。

その機能を関数に抽出できます。

function applybar(bar,progressElem) {
    var progress = progressElem.innerHTML;

    function setProgress(percent) {
        bar.style.width = percent + "%";

        if (percent > 70) bar.className = "graph graph-green";
        else if (percent > 40) bar.className = "graph graph-yellow";
        else if (percent > 0) bar.className = "graph graph-red";
    }

    var interval = setInterval(function () {
        setProgress(progress);
    }, 100);

}

次に、使用法は次のようになります

applybar(document.getElementById("chart1"),document.getElementById("progress1"));
applybar(document.getElementById("chart2"),document.getElementById("progress2"));
applybar(document.getElementById("chart3"),document.getElementById("progress3"));

いくつかのクリーンアップ:

var interval = setInterval(function () {
     setProgress(progress);
}, 100);

setInterval(setProgress,100,progress)、以上のように書き換えることができます。間隔の長さは、パラメーターとして渡すことができます。

var $ = document.getElementByIdエイリアスを付けて配列に入れましょう。

var bars = [{bar:$("chart1"),progress:$("progress1")},
           {bar:$("chart2"),progress:$("progress2")},
           {bar:$("chart3"),progress:$("progress3")}];

それからそれを使用してください

bars.forEach(function(bar){ //forEach requires a modern browser
    applybar(bar.bar,bar.progress);
}
于 2013-06-11T17:04:04.907 に答える