使用不同的数据属性使多个计数器计数

Question

我正在尝试使多个计数器永远计数（从您登陆站点时开始），但我希望它们根据“数据速度”属性中设置的数量以不同的增量计数。例如，一个计数为 100,200,300，另一个计数为 300,400,500。我希望能够在不添加任何 JavaScript 的情况下添加具有不同数据速度的多个不同容器。

我有这个想法：

$(document).ready(function() {
  timer = setInterval("countUP()", 1000);
});

var counter = 0;
var timer;

function countUP() {
  speed = parseInt($(".countup").attr("data-speed"));
  counter = counter + speed;
  document.getElementById("money").innerHTML = counter.toLocaleString("en");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="icon"></div>
  <div id="money" class="countup" data-speed="100">0</div>
  <div class="text">Let's count up</div>
</div>

<div class="container">
  <div class="icon"></div>
  <div id="money" class="countup" data-speed="300">0</div>
  <div class="text">Let's count up differently</div>

Answer 1

您使用相同的 id、相同的类来引用具有不同属性的不同元素，因此 Javascript 卡在第一个元素上。我所做的是将目标 div 设置为 counted 类，并运行一个 foreach 循环来查找子元素跨度。

$(document).ready(function() {
  timer = setInterval("countUP()", 1000);
});

var counter = 0;

function countUP() {
  var elem = $(".counted");
  elem.each(function() {
    var speed = 0;

    var span = $(this).children('span');
    var count = parseInt(span.text());
    speed = parseInt(span.attr("data-speed"));
    counter = count + speed;
    var counted = counter;
    span.text(counted);


  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container counted">
  <div class="icon"></div>
  <span id="money" class="countup" data-speed="100">0</span>
  <div class="text">Let's count up</div>
</div>

<div class="container counted">
  <div class="icon"></div>
  <span id="money" class="countup" data-speed="300">0</span>
  <div class="text">Let's count up differently</div>