여러 동적 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 
});