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

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

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

如何设置限制值 - jquery

2 个答案: