javascript - 如何在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>

标签： javascriptthiscustom-data-attribute

Answer 1

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

试试这个

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

  }
});