javascript - 按类名计数器在 javascript 中不起作用

Question

我创建了一个计数器。

dk = parseInt(document.querySelector('.dm').innerText);
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      document.querySelector('.dm').innerText = i;
    }, i * 100);
  })(i);
}
console.log(dk);

.counter { display: flex; }

.dm {
  background: tomato;
  padding: 15px;
  font-size: 5em;
  font-weight: 700;
  width: 100px;
  height: auto;
  text-align: center;
  margin: 0 2px;
}

<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>

问题只是第一个 div 计数器在工作。我们可以通过类名之类的 html dom 解析 innerHTMl 的元素吗？我尝试了，但结果是 Nan。如果我添加具有不同内部值的相同类名，我想运行所有计数器。

Answer 1

你的问题是你正在使用 document.querySelector() .

当您使用 document.querySelector('.dm') 时，它将仅返回匹配此选择器的第一个元素，您需要使用 document.querySelectorAll('.dm') 获取所有匹配的元素。

但是对于多个元素，您将需要一个循环来执行此操作，因为 querySelectorAll() 将返回一个 nodeList，它是一个集合(array)。

你的代码应该是这样的:

var elements = document.querySelectorAll('.dm');
Array.from(elements).forEach(function(el, ind){
let dk = parseInt(elements[ind].innerText)
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      elements[ind].innerText = i;
    }, i * 100);
  })(i);
}
});

演示:

var elements = document.querySelectorAll('.dm');
Array.from(elements).forEach(function(el, ind){
let dk = parseInt(elements[ind].innerText)
for (var i = 0; i <= dk; i++) {
  (function(i) {
    setTimeout(function() {
      elements[ind].innerText = i;
    }, i * 100);
  })(i);
}
});

.counter { display: flex; }

.dm {
  background: tomato;
  padding: 15px;
  font-size: 5em;
  font-weight: 700;
  width: 100px;
  height: auto;
  text-align: center;
  margin: 0 2px;
}

<div class="counter">
  <div class="dm">40</div>
  <div class="dm">30</div>
</div>