jquery - Bootstrap : Progressbar loading doesn't work correctly

Question

在我的页面中我有一个进度条，它有 3 个部分:progress-bar-success、progress-bar-warning 和 progress-bar -危险。我希望这个进度条的每个部分都将一个接一个地完成，例如当 progress-bar-success 完成时 progress-bar-warning 完成然后最后一个是完整的。

在我的代码中，我不知道哪里出了问题，无法正常工作。

这是我的代码:JSFIDDLE

我该如何解决？

编辑:

我希望我的每个进度条都采用这种样式:bootply

Answer 1

这些是您原始代码中的主要问题:

• 您应该更改进度条 div 的宽度来更新其状态，而不是您的栏元素的宽度。
• 进度条 div 不会受到 container1 div 宽度的影响，因为进度条是 float 的(如果你在浏览器中查看容器，你会发现它没有高度)并且它被设置为与.progress 类。

这是您的代码的快速修复版本:http://jsfiddle.net/436Qz/30/

HTML:

<div class="person-info col-xs-12 col-sm-8">
     <div class="progress progress-striped active">
         <div id="1" class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (success)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="2" class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (warning)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="3" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (danger)</span>
         </div>
     </div>
</div>

JS:

$(document).ready(function(){
    var $bar = $('.progress-bar#1');
    var progress = setInterval(function() {
        if ($bar.width()<260) {
            $bar.width($bar.width() + 26);
        }
        $bar.text(Math.floor($bar.width() / 2.6) + "%");
        if ($bar.width()>=260) {
            $bar.parent().removeClass("active");
            if ($bar.is("#3")) {
                return clearInterval(progress);
            }
            $bar = $bar.parent().next().children(".progress-bar");
        }
    }, 520);
});

CSS:

.person-info {
    margin-top: 40px;
    padding-left: 0px !important;
    padding-right: 0px !important;

}
.progress{
    width: 260px;
}