Question

当我尝试在视图中加载一个进度条时，我遇到了一些麻烦，我使用了本网站上的代码，这里是：

HTML：

            <div class="progress-element">
                <p>HTML</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="75"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
                <p>CSS</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="65"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
                <p>JavaScript</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="20"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
                <p>Wordpress</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="25"  aria-valuemin="0" aria-valuemax="100" >                
                    </div>
                </div>  
            </div><!-- End of progress-element -->

CSS：

.progress {
    background: white;
    box-shadow: none;
}

.progress-bar {
    background: purple;
}

.progress-element {
    text-align: left;
}

JS：

        $(".progress-element").each(function () {
            $(this).waypoint(function () {
                var progressBar = $(".progress-bar");
                progressBar.each(function (indx) {
                    $(this).css("width", $(this).attr("aria-valuenow") + "%");
                });
            }, {
                triggerOnce: true,
                offset: 'bottom-in-view'
            });
        });

有人可以告诉我为什么这不起作用？非常感谢！：）

Bootstrap Progress Bars在视图中加载一次

0 个答案: