在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);
  }
}