jquery進度條沒有顯示

我有一個循環，我需要循環，並創建進度條與jQuery。出於某種原因，進度條顯示爲空，沒有陰影區域，我似乎無法弄清楚爲什麼會出現這種情況。我創建了一個jsfiddle來展示我目前正在處理的內容。任何想法將不勝感激！jquery進度條沒有顯示

HTML：

<div class="panel panel-default"> 
    <table class="table" border=1> 
    <tbody> 

     <tr> 
     <td><strong>ProgressBars:</strong> 

     </td> 
     <td> 
      <div id="progress"></div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div>

的Javascript：

for (i = 0; i < 7; i++) { 
    var taskDiv = '<div><table border=1 class="table table-condensed">'; 
    var progress = 47; 

    taskDiv += ('<tr><td colspan="3"><div id="progressContainer' + i + '" class="progressContainer"><div id="progressbar' + i + '" class="progressbar"></div></div></td></tr>'); 

    setProgress(progress, i); 

    taskDiv += ('</table></div>'); 
    $(taskDiv).appendTo('#progress'); 
} 

function setProgress(progress, uid) { 
    var progressBarWidth = $("#progressContainer" + uid).width() * (progress/100); 
    $("#progressbar" + uid).width(progressBarWidth).html(progress + "% "); 
}

CSS：

/* Progress bar */ 

.progressbar { 
    color: #fff; 
    text-align: right; 
    height: 25px; 
    width: 0%; 
    background-color: #337ab7; 
    border-radius: 3px; 
} 

.progressContainer { 
    width: 300px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    overflow: hidden; 
    display: inline-block; 
    margin: 0px 10px 5px 5px; 
    vertical-align: top; 
}

來源

2016-11-09 JDun

'$（taskDiv）.appendTo（$（'＃progress'））'？ – wscourge

需要注意的是，'progressBarWidth'在您的代碼中始終設置爲0 –

@wscourge沒有執行parens中的技巧包裝。 :( – JDun

你只需要在你追加進度條的HTML來設置進度。像這樣：

taskDiv += ('</table></div>'); 
$(taskDiv).appendTo('#progress'); 

setProgress(progress, i);

jsfiddle

否則，當你調用setProgress功能沒有$("#progressbar")元素和功能，什麼都不做。

來源

2016-11-09 19:20:48 OvSleep

哈利路亞對你很感謝！答案，我甚至沒有意識到我需要改變加入html後的進度水平。現在對我有意義！:) – JDun

jquery進度條沒有顯示

回答

相關問題