javascript - 如何让 setinterval 帮助我使用 for 循环动态更新多个进度条？

Question

我试图在 Django 模板上一次更新多个进度条，但我发现它只更新最后一个。我不确定为什么这里的 for 循环不起作用。任何人都可以提供任何指导。先感谢您。

我将需要的值从 HTML 中提取到对象中。从那里我使用 for 循环动态调整进度条的宽度，但它只响应最后一个 div 以通过 for 循环。

   var a = 0;

var counts = []

// Nestling relevant values in objects for for loop

var five = {
    bar: document.getElementById("fivesBar"),
    quantity: $("#fivesGiven").text()
}

var four = {
    bar: document.getElementById("foursBar"),
    quantity: $("#foursGiven").text()
}

var three = {
    bar: document.getElementById("threesBar"),
    quantity: $("#threesGiven").text()
}

var two = {
    bar: document.getElementById("twosBar"),
    quantity: $("#twosGiven").text()
}

var one = {
    bar: document.getElementById("onesBar"),
    quantity: $("#onesGiven").text()
}

counts.push(one, two, three, four, five);
console.log("Checking the list for counts:", counts);

// Grabbing percent complete to dynamically complete the progress bar
$(document).ready(function () {


    for (b = 0; b < counts.length; b++) {


        quantity = counts[b].quantity;
        console.log(quantity);
        quantity = parseInt(quantity)
        bar = counts[b].bar;

        if (a === 0) {
      
            var width = 0;
            var run = setInterval(fillratings, 5);

            function fillratings() {
        
                if (width === quantity) {
                    clearInterval(run);
                    a = 0;
                } else {
                    width++;
                    bar.style.width = width + "%";
                    console.log(width);
                }
            }
        }
    }
});

标签： javascriptfor-loopdjango-templatessetinterval