通过jQuery更改进度条的宽度

亚历山大7567

我有一些使用bootstrap框架的进度条。我有一个Ajax调用，要求更新条形，但是我不确定如何更改所有参数。

在使用引导程序之前，我使用的图像可以很容易地使用宽度进行调整。但是，对此，我不确定。这是我的进度栏。

<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个人使用所有不同的浏览器，所以我想确保自己做对了...

谢谢！

罗巴比

该.progress-bar班是什么将控制杆的有色区域的宽度，所以要针对它与你用惯了，只是这样做的片段：

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

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

$(".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-bardiv上默认的行内宽度样式以及重复的类名即可。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。