如何自动更改进度条的 span/div 宽度？答案

【问题标题】：How to change progressbar's span/div width automatically?如何自动更改进度条的 span/div 宽度？
【发布时间】：2012-09-25 05:01:56
【问题描述】：

我做了这个简单的html sn-p：<div class="progress-bar"></div>，然后我给它设置了样式：

.progress-bar {
    background-color: #DFDFDF;
    height: 24px;
    margin-bottom: 6.66667px;
    margin-left: -2px;
    margin-top: -22px;
    z-index: 1;
}

另外：

<li>
<span class="name">
<a>theme</a>
</span>
<span class="value"> <?=$howtsrg?></span>
<div class="progress-bar"></div>
</li>

<?=$howtsrg?> =从数据库中获取的值

现在，我想给这个进度条一个宽度，但这必须是自动的，具体取决于从数据库中获取的值。例如，我现在有一个值 7 和值 2 的列表...我想要进度条的不同宽度，因为它们没有相同的值。我怎样才能使这项工作？我找不到相关的 jQuery 脚本。

PS：列表值是动态的，并且会随着时间的推移而变化！所以 7 和 2 可以是 15 和 22！

【问题讨论】：

嗨！我不知道人们如何回答这个问题，我不明白。这个值究竟是什么？ pregressbar 是如何更新的？...
进度条无法更新，因为没有脚本。你必须用css来做，这是合乎逻辑的，对吧？ :) 它是什么并不重要，重要的是要知道它来自数据库并且进度条必须随这个值而改变。就是这样。

标签： jquery dynamic progress-bar width

【解决方案1】：

就这样吧。比如说，你有一个像72 这样的值。你可以使用 jQuery 来做到这一点：

$(".progress-bar").css("width", "75%");

或者，您可以这样做：

$(".progress-bar").width("75%");

你需要给`px`：改变宽度：`<?=$howtsrg?>px;`

【讨论】：

正如我所说：这是将其分配给动态值的正确方法吗？值会改变，这就是为什么......还是谢谢你！
是的，这是一个更好的方法。你不能为 100 个百分比设置 100 个类。
@user1717526 这样使用：<div class="progress-bar" style="width: <?=$howtsrg?>;"></div>
感谢 Praveen Kumar。现在，它只获取具有值的列表项，这是一件好事，但它没有以正确的方式设置它们的宽度。它们现在都具有相同的宽度。
嘿，让我知道完整的代码，以便我更好地指导你？

【解决方案2】：

你可以使用百分比：

$('.progress-bar').width('50%');

要定位单个进度条，您需要给它们ids 或使用适当的选择器选择它们。

【讨论】：

感谢您的回答。但这是将其分配给动态值的正确方法吗？值会改变，这就是为什么......（编辑第一篇文章）
您可以使用表达式：.width((x / max) * 100 + '%')。我不确定您在这里所说的“动态”是什么意思。
动态我的意思是值会改变。不是停留在 7 和 2，而是可以是 14 和 22。
这没有多大帮助。是什么阻止您在每次更改值时计算进度条的百分比并在脚本中设置它？
我更新了我的帖子并提供了更多信息。也许这会有所帮助。

你需要给px：改变宽度：&lt;?=$howtsrg?&gt;px;

你需要给`px`：改变宽度：`<?=$howtsrg?>px;`