0

大家好，我正在尝试为引导程序 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);

    });
});

这是一个小提琴

4

2 回答 2

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>

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

于 2016-06-01T11:29:00.853 回答
0

如果你需要一个进度条，有很多图书馆可以为你做。bootstrap还有一个进度条。

于 2016-06-01T11:25:05.373 回答