どのように制限値を設定する - jquery

Question

こんにちはすべて私はブートストラップ4の各進捗バーの制限を設定しようとしています。 私はそれがクリックでトリガーしたい。今まで私、私は、各プログレスバーの最大値を設定するにはどうすればよい値は常に100になり

クリックしたときに

問題がありますか？

ここにコードがあります。あなたがそこにあなたのためにそれを行うことがare、plenty、of、librariesをプログレスバーが必要な場合は

<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

です。 progress bar for bootstrapもあります。