Question

我想在点击按钮时增加进度条的宽度。

var a = 0;
var bonus = a + "px";
$(document).ready(function(){
  $(".but").click(function(){  
     document.getElementById('lone').style.width=parseInt("bonus", 10)+ "px";
     a+=10; 
  });
});

Answer 1

parseInt("bonus", 10)将返回NaN。因此，请使用parseInt(bonus, 10)作为结果。

但问题是你没有改变点击奖励的价值。

所以正确的方法是改用parseInt(a, 10)。

Answer 2

希望这会有所帮助：

var a = 0;
var bonus = a;
$(document).ready(function(){
  $(".but").click(function(){  document.getElementById('lone').style.width=parseInt(a+10)+'%';
         a+=10; 
  });

});

var a = 0;
var bonus = a;
$(document).ready(function(){
  $(".but").click(function(){  document.getElementById('lone').style.width=parseInt(a+10)+'%';
         a+=10; 
  });
  
});

.but {
    background-color: green; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.for{
  display: flex;
  justify-content:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>The pgrogress</title>
</head>
<body>
  <div class="container-fluid">
  <div class="progress">
  <div class="progress-bar" id="lone" role="progressbar" style="width: 5%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
 <div class="for">
   <button class="but">Button</button>
  </div>
    </div>
</body>
</html>

Answer 3

用这个更新你的javascript函数。

var CurrentValue =  $('#lone').width();
var incremental = 10;
$(document).ready(function(){
  $(".but").click(function(){
    $('#lone').width(CurrentValue += incremental);
  }); 
});

Answer 4

您只需要应用parseInt()功能即可删除＆＃34; px＆＃34;在价值的最后。

我还略微简化了jQuery代码：

$(document).ready(function(){

  a = parseInt($('#lone').css('width'));

  $(".but").click(function(){  
    a+=10;
    $('#lone').css('width', a + 'px');
  });

});

这里是CodePen fork with changes applied。

希望它有所帮助！

Answer 5

首先 - 您可能应该使用GetProducts(PageNumber) { this.ProductSubscriber = this.productsService.GetAllProductsByPage(Page).subscribe(products => { if (products.length == 0 || products.length < this._AppConfig.PaginationNum) { this.ProductsLoaded = true; } if (this.products.length != 0) { products.forEach(element => { this.products.push(element); }); } else this.products = products; }, err => { }而不是parseInt(bonus, 10)。

为什么首先使用parseInt("bonus", 10) var？您可以使用一个变量执行此操作：

＆＃13;

bonus

＆＃13;

var a = 0;
$(document).ready(function() {
  $(".but").click(function() {
    document.getElementById("lone").style.width = a + "px";
    a += 10;
  });
});

＆＃13;

.but {
    background-color: green; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.for{
  display: flex;
  justify-content:center;
}

＆＃13;

Answer 6

只需更新您的Codepan＆＃34; js＆＃34;通过以下代码，我希望你也想这样。

var a = 0;
var bonus = a + "px";
$(document).ready(function(){
  $(".but").click(function(){  
         a+=10; 
      $('.progress-bar').css('width',a)
  });

});

为什么宽度不增加？

6 个答案: