按类名计数器在 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>

Answer 2

您的问题不是很清楚，但如果我理解正确，您希望两个计时器同时运行，对吧？

如果是这样，那么下面的代码应该会有所帮助。

使用querySelectorAll() 获取具有相同类的所有元素，然后遍历它们以获取值并使其像您一样增加。

const dms = document.querySelectorAll('.dm');

for (let j = 0; j < dms.length; j++){
  let dk = dms[j].innerText;
  
  for(let i = 0; i <= dk; i++){
      setTimeout(function() { 		
        dms[j].innerText = i; 
      }, i * 100);
  }
  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>