如何设置限制价值 - 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。