如何同时为多个进度条设置动画？

Question

我需要为我的数据库中的不同元素制作一个进度条。我的数据库中目前有 4 个项目，每个项目都有一个关联的进度条。我正在使用 ASP.Net Core (MVC)，其中我有一个名为 Server 的 class，它具有两个属性：ComputerName 和 Type。

这里是 html 创建多个进度条的代码：

 <div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
    <div id="serverName">@server.ComputerName</div>
    <div class="progress">
        <div id="myProgress" class="bar bar-danger"></div>

    </div>
}

</div>

这里是 javascript 代码：

$('.progress').each(函数(){

var bar = document.getElementById("myProgress");
var progress = 0;


function setProgress(percent) {
    bar.style.width = percent + "%";

    if (percent < 30) {
        bar.className = "progress-bar progress-bar-danger progress-bar-striped active";
    } else if (percent >= 30 && percent < 70) {
        bar.className = "progress-bar progress-bar-warning progress-bar-striped active";
    } else if (percent >= 70 && percent < 80) {
        bar.className = "progress-bar progress-bar-info progress-bar-striped active";
    } else if (percent >= 80 && percent < 100) {
        bar.className = "progress-bar progress-bar-success progress-bar-striped active";
    } else if (percent == 100) {
        bar.className = "progress-bar progress-bar-success";
    }


}

var interval = setInterval(
    function () {
        setProgress(++progress);
        if (progress == 100) window.clearInterval(interval);
    }, 100);


});

注意：现在我不担心每个进度条的百分比，我只想确保所有进度条都是动画的

这是输出：

其中只有一个是动画的。为什么会这样？

Answer 1

ids 必须是唯一的。相反，给每个进度条一个 class 和 select 它与 querySelector.

HTML:

 <div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
    <div class="serverName">@server.ComputerName</div>
    <div class="progress">
        <div class="myProgress bar bar-danger"></div>

    </div>
}

</div>

JS:

$('.progress').each(function () {

var bar = this.querySelector(".myProgress");
var progress = 0;


function setProgress(percent) {
    bar.style.width = percent + "%";

    if (percent < 30) {
        bar.className = "myProgress progress-bar progress-bar-danger progress-bar-striped active";
    } else if (percent >= 30 && percent < 70) {
        bar.className = "myProgress progress-bar progress-bar-warning progress-bar-striped active";
    } else if (percent >= 70 && percent < 80) {
        bar.className = "myProgress progress-bar progress-bar-info progress-bar-striped active";
    } else if (percent >= 80 && percent < 100) {
        bar.className = "myProgress progress-bar progress-bar-success progress-bar-striped active";
    } else if (percent == 100) {
        bar.className = "myProgress progress-bar progress-bar-success";
    }


}

var interval = setInterval(
    function () {
        setProgress(++progress);
        if (progress == 100) window.clearInterval(interval);
    }, 100);


});

如何同时为多个进度条设置动画？

How to animate multiple progress bars at the same time?

javascript

asp.net-core

progress-bar