如何擁有多個動態jQuery進度條

Question

我試圖讓多個進度條同時動畫，但不同的值。使用下面的HTML和jQuery，兩個條都會達到相同的最終值。

<progress id="progressbar" value="50" max="100"></progress><span class="progress-value">0%</span> 
<progress id="progressbar" value="30" max="100"></progress><span class="progress-value">0%</span> 

......

<script> 
$(document).ready(function() { 

var progressbar = $('#progressbar'), 
     max = progressbar.attr('value'), 
     time = (1000/max)*2,  
     value = 0 

    var loading = function() { 
     value += 1; 
     addValue = progressbar.val(value); 

     $('.progress-value').html(value + '%'); 

     if (value == max) { 
      clearInterval(animate);      
     } 
    }; 

    var animate = setInterval(function() { 
     loading(); 
    }, time); 

}); 
</script> 

我知道，這是因爲進度的兩個實例只是遵循同樣的jQuery，但我不知道如何使它的動態。任何幫助，將不勝感激。

編輯：

var progressbar2 = $('#progressbar2'), 
max2 = progressbar2.attr('value'), 
time2 = (1000/max2)*2,  
    value2 = 0 

    var loading2 = function() { 
    value2 += 1; 
    addValue = progressbar2.val(value); 

    $('.progress-value2').html(value + '%'); 

    if (value2 == max2) { 
     clearInterval(animate2);      
    } 
}; 
var animate2 = setInterval(function() { 
    loading2(); 
}, time); 

此作品（加上原有功能的克隆），但顯然這不是我想做的事情。有沒有一種方法可以迭代所有可能的進度條，使用類似於for循環的東西？

Answer 1

你應該給每個控件一個不同的id，例如： progressbar1，progressbar2等。 您可以使用類選擇器代替id選擇器，然後使用「progress-value」類迭代每個元素。 像這樣：

$('.progress-value').each(function(i, obj) { 
    //your code here 
});