ASP.NET Core MVC如何实现多个进度条同时动画？

• 第一个核心问题是ID重复冲突：HTML规范要求页面内所有元素的id属性必须全局唯一，你在@foreach循环里给每个进度条的内层div都设置了固定id="myProgress"，循环4次就会生成4个同id的元素，而document.getElementById("myProgress")只会匹配到页面里第一个出现的该id元素，所以所有循环里的JS逻辑都只会操作第一个进度条，其他进度条完全不会被修改。
• 第二个问题是遍历进度条时的元素选择逻辑错误：你已经用$('.progress').each遍历每个进度条容器了，但没有关联当前遍历到的容器去查找它内部的进度条元素，而是全局查找id，完全没有用到each遍历的上下文。

第一步 调整HTML代码 #

把固定id改成class，避免id冲突：

<div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
    <!-- 服务器名称也把id改成class，避免重复 -->
    <div class="serverName">@server.ComputerName</div>
    <div class="progress">
        <!-- 把id="myProgress"替换为class属性 -->
        <div class="myProgress bar bar-danger"></div>
    </div>
}
</div>

第二步 调整JavaScript代码 #

在each遍历的上下文中，查找当前进度条容器内的进度条元素：

$('.progress').each(function () {
    // 查找当前遍历到的.progress容器内部的.myProgress元素
    var bar = $(this).find('.myProgress')[0];
    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);
});

注意：修改className时需要保留myProgress类，避免后续DOM查找失效

内容的提问来源于stack exchange，提问作者Sam