动态更改Bootstrap进度条

Question

动态更改Bootstrap进度条

9

I have the following HTML code, using Bootstrap:

<div class="progress">
                <div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                </div>
            </div>

我希望style="width: 0"能够增加到100％。我尝试使用下面的代码进行测试，但是没有任何反应。

<head>
    <title>Verifying Oracle database...</title>

    <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    <script>

        $(document).ready(function() {
            $("#progress-bar").css("width", "50%");
            $("#progress-bar").attr("aria-valuenow", "50%");
        });

    </script>

</head>

有人能帮助推动这个进程吗？

提前感谢。

- Lucas Rezende

2

你正在加载DOM元素之前运行该脚本。你需要将其包装在$(document).ready()中或将脚本放置在<body>的末尾。 - Brennan

@Brennan，感谢您的回答。我把它放在<body>的末尾，但还是不起作用。:( - Lucas Rezende

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- artm · Accepted Answer

您用于更新宽度的代码是正确的，但正如 @Brennan 指出的那样，它必须在进度条渲染之后运行，例如通过将脚本标签放置在进度条标记之后（fiddle）或者在文档就绪处理程序中运行它 (fiddle)。

以下是最小版本，可以实现您尝试的内容（这些fiddle模拟从0到100运行的进度）：

$(function() {
     $("#progress-bar").css("width", "50%");
});

关于代码的另一个注意事项：除了进度条的宽度之外，您还应该更新aria-valuenow属性，该属性表示辅助技术浏览器中范围小部件（此处为进度条）的当前值。在您的示例中，aria-valuenow为45，但宽度为0，这是不一致的。