动态更改 Bootstrap 进度条答案

【问题标题】：Change Bootstrap progress bar dynamically动态更改 Bootstrap 进度条
【发布时间】：2023-03-14 03:23:01
【问题描述】：

我有以下 HTML 代码，使用 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>

有人可以帮助实现这一进展吗？

提前致谢。

【问题讨论】：

您在加载 DOM 元素之前运行该脚本。您需要将其包装在$(document).ready() 中或将脚本放在<body> 的末尾
@Brennan，感谢您的回答。我放在<body> 的末尾，但也没有用。 :(

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

以下是您尝试过的最小版本（小提琴模拟从 0 到 100 的进度）：

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

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

【讨论】：

新代码应该可以工作。您是否收到任何错误消息？
非常感谢您的进度条。我有一个小的修改和一个评论：我使用 value = parseInt($("#targetPB").text(), 10) || 而不是 value +=10 0;因为我需要通过 Ajax 调用在 targetPB 中发布值，并且可能返回“None” - 这反过来会导致 NaN 错误 - 因此 parseInt 和 || 0 ...如果不是数字，则为零。评论是，虽然进度条在 Chrome 和 Firefox 中运行良好，但在 Safari（Mac 上）中无法运行