动态更改Bootstrap进度条

Question

动态更改Bootstrap进度条

Luc*_*nde 6 javascript jquery twitter-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>

Run Code Online (Sandbox Code Playgroud)

我想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>

Run Code Online (Sandbox Code Playgroud)

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

提前致谢.

Answer 1

art*_*rtm 13

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

以下是您尝试过的最小版本(小提琴模拟从0到100的进度):

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

Run Code Online (Sandbox Code Playgroud)

关于代码的另一个注释:除了进度条的宽度之外,您还应该更新aria-valuenow属性,该属性表示辅助技术浏览器的范围窗口小部件(此处为进度条)的当前值.在您的示例中,您有aria-valuenow 45但宽度为0,这是不一致的.

非常感谢一个伟大的进步吧.我有一个小修改和一个注释:而不是值+ = 10我使用value = parseInt($("#targetPB").text(),10)|| 0; 因为我需要通过Ajax调用在targetPB中发布值,并且可能返回'None' - 这反过来会导致NaN错误 - 因此parseInt和|| 0 ...如果不是,则数字为零.评论是,虽然进度条在Chrome和Firefox中运行良好,但它在Safari中无效(在Mac上) (2认同)

归档时间：	11 年，1 月前
查看次数：	23695 次
最近记录：	11 年，1 月前