如何将限制设置为值 - jquery

Question

大家好我正在尝试为 bootstrap 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

如果你需要一个进度条are, plenty, of, libraries out there that do it for you. There's also a progress bar for bootstrap。

Answer 2

您可以使用自定义数据属性：

 $('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>

已更新 fiddle：https://jsfiddle.net/csmrtrvg/2/

如何将限制设置为值 - jquery

How Set limit to value - jquery

javascript

jquery

twitter-bootstrap-4