如何設置限制價值 - jquery

Question

嗨所有我試圖設置每個進度條在引導4的限制。 我希望它觸發點擊。

的問題是當過我點擊

值總是轉到100.我如何可以爲每一個進度條的最大值？

這是代碼。

<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>

更新小提琴：https://jsfiddle.net/csmrtrvg/2/

Answer 2

如果你需要一個進度條出現are，plenty，of，libraries在那裏，爲你做它。還有一個progress bar for bootstrap。