jquery 进度条未显示

Question

我有一个 for 循环，我需要循环并使用 jquery 创建进度条。出于某种原因，进度条只是显示为空，没有阴影区域，我似乎无法弄清楚为什么会这样。我创建了一个 jsfiddle 来显示我当前正在处理的内容。任何想法将不胜感激！

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

Answer 1

您只需在追加进度条的 HTML 之后设置进度。像这样：

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

setProgress(progress, i);

jsfiddle

否则，当您调用 setProgress 函数时，没有 $("#progressbar") 个元素，该函数什么也不做。

jquery 进度条未显示

jquery progress bar not showing up

html

javascript

css

jquery

progress-bar