在javascript中循环遍历类

Question

我正在尝试使用JS制作进度条。

我试图遍历我的类以获取属性的值，从而增加进度条的宽度。

function prog(){
    var width = 1;
    var elem = document.getElementsByClassName('bar');
    var id = setInterval(frame, 10);
    var attr = elem.getAttribute("data-progress");

    function frame(){
        if(width >= attr){
            clearInterval(id);
        } else {    
            width++;

            for(i= 0; i < elem.length; i++){
                elem[i].style.width = width + '%';
            }
        }
    }
}

我的问题是， 如何在JS循环中访问attr？

Answer 1

您可以使用简单的for ... of循环遍历所有元素：

 function prog() { let elem = document.getElementsByClassName('bar'); let width = 1; for (let el of elem) { //HERE let attr = el.getAttribute("data-progress"); let id = setInterval(_ => { if (width >= attr) { clearInterval(id); } else { width++; for (i = 0; i < elem.length; i++) { elem[i].style.width = width + '%'; } } }, 10); } }