jquery - 如何用jQuery制作动态进度条

Question

我正在尝试做一些如此琐碎和简单的事情，但已经撞了我的头一个小时了。我试图通过每次用户单击按钮时添加 10 来使进度条向前移动，但只有第一次单击有效。我想我需要第二双眼睛，因为我没有看到我错在哪里。显然我在某个地方错了。

我在这里重现了用例:

$(document).ready(function() {
     $('#increaseMeter').click(function(e){
            e.preventDefault();
                            //get meter progress number
                             var progress = $('.barmeter').attr('meterprogress');
                           
                             //add 10 to the meter
                             var mathnum =progress;
                             mathnum += parseInt(progress)+parseFloat(10);
                             
                            //format new classes depending on progress number
                             if(progress <60){
                             var newclass = 'progress-bar-warning';
                             }else{
                             var newclass = 'progress-bar-success';    
                             }
                             //update meter progress attribute
                             $('.barmeter').attr('meterprogress='+mathnum);
                            
                             //add class to meter
                             $('.barmeter').addClass(newclass);
                             
                             //change style width
                             $('.barmeter').attr('style', 'width:'+mathnum+'%');
                             
                             //change aria value
                             $('.barmeter').attr('aria-valuenow', mathnum);
                             
                             //display new text
                             $('.metertext').html(mathnum+'%');
     });
});

   <!-- bootstrap css stylesheets -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- bootstrap javascript, jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<p>
 <br><br>
  <div class="container">
<button class="btn btn-lg btn-primary" 
        id="increaseMeter">
  Increase Meter
    </button>
</p> <br><br>



 <div class="col-md-6">
<div style="" class="salesmeter"> 
                       Meter Probability
        <div class="progress">
              <div class="progress-bar barmeter" 
                        meterprogress="0"
                        role="progressbar" 
                        aria-valuenow="0"
                        aria-valuemin="0" 
                        aria-valuemax="100">
                        <span class="metertext"></span>
                        </div> </div></div>

Answer 1

$(document).ready(function() {
     $('#increaseMeter').click(function(e){
            e.preventDefault();

                            //get meter progress number
                             var progress = parseInt($('.barmeter').attr('meterprogress'));

                             //add 10 to the meter
                             var mathnum  =  progress + parseFloat(10);

                            //format new classes depending on progress number
                             if(progress <60){
                                //add class to meter
                             $('.barmeter').addClass('progress-bar-warning');

                             }else{
                               $('.barmeter').addClass('progress-bar-success').removeClass('progress-bar-warning');

                             }
                             //update meter progress attribute
                             $('.barmeter').attr('meterprogress' , mathnum);


                             //change style width
                             $('.barmeter').attr('style', 'width:'+mathnum+'%');

                             //change aria value
                             $('.barmeter').attr('aria-valuenow', mathnum);

                             //display new text
                             $('.metertext').html(mathnum+'%');
     });
});

https://codepen.io/vommbat/pen/LBBpRz/