更改引導進度條動態

我有以下的HTML代碼，使用引導：更改引導進度條動態

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

有人可以幫助使這種進步發生？

在此先感謝。

來源

2014-10-17 Lucas Rezende

您正在加載DOM元素之前運行該腳本。您需要將其包裝在'$（document）.ready（）'中，或者將腳本放在'' – Brennan 2014-10-17 19:51:07

@Brennan的末尾，謝謝你的回答。我在''的末尾放了'，但是也沒有工作。（ – 2014-10-17 19:52:36

您用來更新寬度的代碼是正確的，但是@Brennan指出它必須在渲染進度條之後運行 - 例如，通過將腳本標記放置在進度條標記（fiddle）之後或通過在文檔就緒處理程序（fiddle）中運行它。

以下是最小的版本，做了你試過我們的（小提琴模擬運行，從0到100的進展）：

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

的代碼另注：隨着你應該進度條的寬度更新aria-valuenow attribute，它代表輔助技術瀏覽器的範圍小部件的當前值（此處爲進度條）。在你的樣本中，你有aria-valuenow 45但寬度爲0，這是不一致的。

來源

2014-10-17 20:15:53 artm

新代碼應該工作。你是否得到任何錯誤消息？ – artm 2014-10-18 07:30:31

非常感謝一個偉大的進度條。我有一個小修改和一個評論：而不是值+ = 10我使用value = parseInt（$（「 #targetPB「）。text（），10）|| 0;因爲我需要通過Ajax調用在targetPB中發佈值，並且可能會返回'None' - 這反過來會導致NaN錯誤 - 因此parseInt和|| 0 ...如果不是一個數字有零。評論是，雖然進度條在Chrome和Firefox中很好地工作，但它不適用於Safari（在Mac上） – Toren 2016-02-22 02:28:14

更改引導進度條動態

回答

相關問題