Javascript 单击按钮时递增引导进度栏

我有三个按钮，当点击时，我希望增加进度条的值。单击一个按钮等于进度条值33%，单击两个按钮67%，单击三个按钮100%。基本上是这样的：

我已经知道了如何让每个按钮单击为进度条设置一个值，但是它会在每次单击时重置，而不是添加增量值。这是我的密码：

<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">0% Complete (success)</span>
</div>
</div>

        <div class="main-action row">

           <div class="col-md-4 col-sm-4">
           <button id="code1" type="button" class="btn btn-lg btn-block btn-warning"><i class="fa fa-facebook"></i>&nbsp; &nbsp; Share</button>
           </div>

           <div class="col-md-4 col-sm-4">
           <button id="code2" type="button" class="btn btn-lg btn-block btn-info"><i class="fa fa-twitter"></i>&nbsp; &nbsp; Tweet</button>
           </div>

           <div class="col-md-4 col-sm-4">
           <button id="code3" type="button" class="btn btn-lg btn-block btn-success"><i class="fa fa-play"></i>&nbsp; &nbsp; Watch</button>
           </div>

        </div>

页面上的js看起来是一个优雅的示例，但我不知道如何将其转换为引导框架：

$(function() {
var clicks = 0;
$('button').on('click', function() {
    clicks++;
    var percent = Math.min(Math.round(clicks / 3 * 100), 100);
    $('.percent').width(percent + '%');
    $('.number').text(percent + '%');
});

---

最后，给出我的代码，有人能帮我在点击按钮时实现相同的“共享”js弹出窗口吗？谢谢大家!

上面显示的示例就快到了……但我要做一个更改（'button'）click事件将在您单击的任何按钮上触发，因此将其更改为如下内容：（要么给它类（即button）

---

看看这是怎么回事。你可能会想变得更时髦一点，然后在点击按钮后禁用它……但是如果你是新手，那么它可能会让事情变得有点复杂！

那么，你被困在哪里了？你有代码，看起来可以通过更改选择器来适应你的标记，这样做很容易。我不知道如何更改选择器以适应我的标记。这是我尝试过的最高级的编码。这里是Total noob。谢谢你的帮助。谢谢你！这很有魅力。我添加了第四行，这样每个按钮只能使条前进一次：

jQuery（函数（$）{var clicks=0；$（“#代码1，#代码2，#代码3”）。on（“单击”，函数（事件）{$（this）.off（事件）；单击++；变量百分比=数学.round（单击/3*100）；$（'.progress bar'）。宽度（百分比+'%'）。文本（百分比+'%'）；}）；}）；

$(function() {
var clicks = 0;
$('button').on('click', function() {
    clicks++;
    var percent = Math.min(Math.round(clicks / 3 * 100), 100);
    $('.percent').width(percent + '%');
    $('.number').text(percent + '%');
});

$(function() {
var clicks = 0;
 $('.code-button').on('click', function() {
  clicks++;
  var percent = Math.min(Math.round(clicks / 3 * 100), 100);
  $('.progress-bar').width(percent + '%').text(percent + '%');
 });
});