Подсчет нескольких счетчиков с использованием разных атрибутов данных - PullRequest
Новая
       11

Подсчет нескольких счетчиков с использованием разных атрибутов данных

0 голосов
/ 31 мая 2018

Я пытаюсь сделать так, чтобы несколько счетчиков считались вечно (с момента, когда вы приземлились на сайте), но я хочу, чтобы они подсчитывали с разным шагом, в зависимости от количества, установленного в атрибуте data-speed.Например, один подсчитывает 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>

1 Ответ

0 голосов
/ 31 мая 2018

Вы используете один и тот же идентификатор, один и тот же класс для ссылки на разностные элементы с разными атрибутами, поэтому 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>
...