Question

我有三个按钮，点击后我想逐渐增加进度条的值。单击一个按钮等于进度条值33％，单击两个按钮67％，三个按钮100％。基本上就是这样：http://www.somawater.co/ksshare/

我已经弄清楚如何让每个按钮点击为进度条设置一个值，但它会在每次点击时重置，而不是添加增量值。这是我的代码：

<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

jQuery(function ($) {
$('#code1').click(function () {
    var val = 33 + '%';
    $('.progress-bar').width(val).text(val)
})
});

jQuery(function ($) {
$('#code2').click(function () {
    var val = 34 + '%';
    $('.progress-bar').width(val).text(val)
})
});

jQuery(function ($) {
$('#code3').click(function () {
    var val = 33 + '%';
    $('.progress-bar').width(val).text(val)
})
});

http://www.somawater.co/ksshare/页面上的js看起来是一个优雅的例子，但我无法弄清楚如何将其转换为Bootstrap框架：

$(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弹出窗口吗？谢谢！

Answer 1

您显示的上述示例几乎就在那里....但我会更改（'按钮'）点击事件会触发您点击的任何按钮，所以将其更改为：（或者给它class（按钮）......

$(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 + '%');
 });
});

看看情况如何。您可能希望获得更多时髦，并在点击后禁用该按钮...但如果您是新手，那么它可能只会让事情变得简单！

按钮上的增量引导进度条单击

1 个答案: