如何拥有多个动态 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 ，例如进度条 1 ，进度条 2 等。 您可以使用类选择器而不是 id 选择器， 然后使用“progress-value”类遍历每个元素。 像这样：

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