动态更改Bootstrap进度栏 [英] Change Bootstrap progress bar dynamically
问题描述
我有以下HTML代码，使用Bootstrap:
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％.我尝试使用下面的代码作为测试，但没有任何反应.
I want style="width: 0" to increase until it is 100%. I tried to use the code below as a test, but nothing happened.
<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?
谢谢.
推荐答案
您用于更新宽度的代码是正确的，但是正如@Brennan指出的那样，它必须在呈现进度条后才能运行-例如通过将脚本标签放在进度栏标签之后(小提琴)或在其中运行文档就绪处理程序(小提琴).
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).
以下是完成您尝试的最低版本(小提琴模仿从0到100的进度):
The following is the minimal version which does what you tried (the fiddles emulate progress running from 0 to 100):
$(function() {
$("#progress-bar").css("width", "50%");
});
关于代码的另一条注释:连同进度条的宽度，您应该更新 aria-valuenow属性，它表示辅助技术浏览器的范围小部件(在这里是进度条)的当前值.在您的样本中，aria值现在为45，而宽度为0，这是不一致的.
Another note on the code: along with the width of the progress bar you should update the aria-valuenow attribute which 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.
这篇关于动态更改Bootstrap进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
