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进度条没有显示

回答

相关问题