jquery - 如何自动更改进度条的 span/div 宽度？

Question

我制作了这个简单的 html 片段：<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！

Answer 1

就这样做吧。说，你有一个像72. 您可以使用 jQuery 来执行此操作：

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

或者，您可以这样做：

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

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

Answer 2

您可以使用百分比：

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

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