Question

我有一些使用bootstrap框架的进度条。我有一个Ajax调用请求更新栏，但我不知道如何更改所有参数。

在我使用bootstrap之前，我使用了一个可以使用宽度轻松调整的图像..但有了这个，我不确定。这是我的进度条。

<div class='progress'>
  <div class='progress-bar progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 60%;'>
    <span class='sr-only'>60% Complete</span>
  </div>
</div>

这是我用旧图像的Javascript：

$("#img_enperc").css('width', $("enperc", xml).text());
$("#img_enopp").css('width', $("enopp", xml).text());

这可能很简单，但由于每天大约有130人使用所有不同的浏览器，我想确保我做对了......

谢谢！

Answer 1

.progress-bar类将控制条形图的彩色区域的宽度，因此要使用您以前使用的代码段来定位它，只需执行以下操作：

$(".progress-bar").css('width', $("enperc", xml).text());

使用此方法遇到的问题是.progress-bar div使用基于百分比的宽度来计算其大小，因此您需要将$("enperc", xml).text()的输出转换为百分比。< / p>

$(".progress-bar").css('width', $("enperc", xml).text() + "%");

这当然取决于你产生的数字的价值在1-100之间。否则，您必须得出自己的百分比值。

如果您想要使用多个进度条，只需为.progress包装器指定一个唯一的ID，然后以这种方式定位：

<div id="progressMain" class='progress'>
  <div class='progress-bar' role='progressbar'>
    <span class='sr-only'>60% Complete</span>
  </div>
</div>

然后：

$("#progressMain .progress-bar").css('width', $("enperc", xml).text());

请记住删除.progress-bar div上的默认内联宽度样式以及重复的类名。

通过jQuery更改进度条的宽度

1 个答案: