어떻게 한계 값으로 설정 - jquery

Question

안녕 모두 부트 스트랩 4의 각 진행률 표시 줄에 대한 제한을 설정하려고합니다. 클릭시 트리거하려고합니다. 지금까지 나는 내가 각각 진행 막대의 최대 값을 설정할 수있는 방법 값은 항상 100로 이동

클릭하면

문제는?

다음은 코드입니다. 당신이 거기 당신을 위해 그것을 할 것을이 are, plenty, of, libraries을 진행 표시 줄이 필요하면

<button>run</button> 
<progress class="progress progress-striped progress-animated limit70" value="" max="100"></progress> 
<progress class="progress progress-striped progress-animated limit80" value="" max="100"></progress> 

$('button').on('click', function() { 
    $('.progress').each(function() { 
     var progBar = $(this); 
     var perc = progBar.attr("max"); 
     var userInput = $('input#speed').val(); // in seconds 
     var speed = userInput * 10; 
     var currentPerc = 0; 
     var progress = setInterval(function() { 

      if (currentPerc >= perc) { 
       clearInterval(progress); 

      } else { 
       currentPerc += 1; 
       progBar.attr('value', (currentPerc) + ''); 
      } 
      progBar.attr((currentPerc) + ''); 
     }, speed); 

    }); 
}); 

는 여기 fiddle

Answer 1

당신은 사용자 정의 데이터 속성으로 일할 수 :

$('button').on('click', function() { 
 
    $('.progress').each(function() { 
 
    var progBar = $(this); 
 
    var perc = progBar.attr("max"); 
 
    var userInput = $('input#speed').val(); // in seconds 
 
    var speed = userInput * 10; 
 
    var currentPerc = 0; 
 
    var limit = progBar.data("limit"); 
 
    var progress = setInterval(function() { 
 

 
     if (currentPerc >= limit) { 
 
     clearInterval(progress); 
 

 
     } else { 
 
     currentPerc += 1; 
 
     progBar.attr('value', (currentPerc) + ''); 
 
     } 
 
     progBar.attr((currentPerc) + ''); 
 
    }, speed); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="user-controls"> 
 
    <button>Click to run</button> 
 
</div> 
 

 

 
<progress class="progress progress-striped progress-animated limit70" data-limit="70" value="" max="100"></progress> 
 
<br/> 
 
<progress class="progress progress-striped progress-animated limit80" data-limit="80" value="" max="100"></progress>

업데이트 바이올린 : 당신이 사용하는 플러그인이 ProgressBar의 https://jsfiddle.net/csmrtrvg/2/

Answer 2

입니다. progress bar for bootstrap도 있습니다.