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）。 / p>

这应该是您的代码：

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>

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

2 个答案: