Javascript 动态更改 Bootstrap 进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26432408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Bootstrap progress bar dynamically
提问by Lucas Rezende
I have the following HTML code, using Bootstrap:
我有以下 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>
I want style="width: 0"to increase until it is 100%. I tried to use the code below as a test, but nothing happened.
我想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>
Can someone help to make this progress happen?
有人可以帮助实现这一进展吗？
Thanks in advance.
提前致谢。
回答by artm
The code you use to update width is correct, but as @Brennan pointed out it has to run after the progress bar is rendered - e.g. by placing the script tag after the progress bar tag(fiddle) or by running it in the document ready handler (fiddle).
您用于更新宽度的代码是正确的，但正如@Brennan 指出的那样，它必须在呈现进度条后运行 - 例如通过将脚本标签放置在进度条标签（fiddle）之后或通过在文档就绪处理程序中运行它（小提琴）。
The following is the minimal version which does what you tried (the fiddles emulate progress running from 0 to 100):
以下是执行您尝试过的操作的最小版本（小提琴模拟从 0 到 100 运行的进度）：
$(function() {
$("#progress-bar").css("width", "50%");
});
Another note on the code: along with the width of the progress bar you should update the aria-valuenowattributewhich represents the current value of a range widget (here the progress bar) for the assistive technology browsers. In your sample you have aria-valuenow 45 but width 0, which is inconsistent.
关于代码的另一个注意事项：随着进度条的宽度，您应该更新表示辅助技术浏览器的范围小部件（此处为进度条）的当前值的aria-valuenow属性。在您的示例中，您的 aria-valuenow 为 45，但宽度为 0，这是不一致的。
