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
});

如何拥有多个动态jQuery进度条

1 个答案: