通過getElementByID將腳本應用於多個ID

我試圖在整個過程中爲多個ID創建條形圖/進度條。但由於某種原因，我很難過。通過getElementByID將腳本應用於多個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);

任何幫助將是可怕的。

來源

2013-06-11 Joey Kirk

'getElementById'只接受一個參數。 – Blender

我明白這一點。任何方式通過創建一個數組並應用它來解決該問題？ –

這就是你如何做到的。 – Blender

就像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-11 17:04:04

這工作完美！謝謝！ –

@JoeyKirk太棒了，[請考慮接受這個答案]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）如果你覺得它解決了你的問題。 –

你需要通過你的函數使用數組和遍歷它像下面

var bar =["chart1", "chart2", "chart3"]; 

for(var i=0;i<bar.length;i++) 
{ 
    var barElement = document.getElementById(bar[i]); 
    // do your task with barElement 
}

來源

2013-06-11 17:06:22

有了這個，你做同樣的變化進展？ –

是的，你必須以同樣的方式處理var進度 –

通過getElementByID將腳本應用於多個ID

回答

相關問題