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

1 个答案: