如何在 javascript 中使用 values data-num html 属性

Question

我希望数字增加到 HTML(data-num="") 中的任务。但是我的代码只适用于一个数据编号。第二个数字不变。如何让多个数字同时变化？

var number = document.querySelector('.numbers'),
  numberTop = number.getBoundingClientRect().top,
  start = 0,
  end = number.dataset.num;

window.addEventListener('scroll', function onScroll() {
  if (window.pageYOffset > numberTop - window.innerHeight / 2) {
    this.removeEventListener('scroll', onScroll);
    var interval = setInterval(function() {
      number.innerHTML = ++start;
      if (start == end) {
        clearInterval(interval);
      }
    }, 5);
  }
});

html {
  height: 1000px;
}

<p data-num="548" class="numbers">0</p>
<p data-num="548" class="numbers">0</p>

Answer 1

问题是即使您通过 class 选择器进行查询，您也只引用了第一项。您需要使代码循环遍历元素数组。

试试这个

var number = document.querySelectorAll('.numbers'),
  numberTop = number[0].getBoundingClientRect().top,
  start = 0,
  end = number[0].dataset.num;

window.addEventListener('scroll', function onScroll() {
  if (window.pageYOffset > numberTop - window.innerHeight / 2) {
    this.removeEventListener('scroll', onScroll);
    var interval = setInterval(function() {
      ++start;
      number.forEach( (item,index) => (item.innerHTML = start));
      if (start == end) {
        clearInterval(interval);
      }
    }, 5);

  }
});

如何在 javascript 中使用 values data-num html 属性

how to use values data-num html attribute in javascript

javascript

this

custom-data-attribute