Question

我正在尝试让多个计数器永远计数（从你登陆现场开始）但是我希望它们以不同的增量计数，具体取决于＆＃34;数据速度＆＃34;中设置的数量。属性。例如，一个计数增加100,200,300，另一个计数增加300,400,500。我希望能够添加具有不同数据速度的多个不同容器，而无需添加任何JavaScript。

我脑子里有这个：

＆＃13;

$(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");
}

＆＃13;

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

＆＃13;

Answer 1

你使用相同的id，同一个类来引用具有不同属性的差异元素，因此Javascript被卡在第一个元素上。我所做的是使用类counted设置目标div并运行一个查找子元素范围的foreach循环。

＆＃13;

$(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);


  });

}

＆＃13;

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

＆＃13;

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

1 个答案: