如何使 jquery 计数器与来自 innerHTML 的数据一起工作答案

【问题标题】：How to make jquery counter work with data from innerHTML如何使 jquery 计数器与来自 innerHTML 的数据一起工作
【发布时间】：2019-12-07 11:44:55
【问题描述】：

我正在尝试使用 jquery 制作一个计数器。此计数器在数据直接传递到 div 时起作用，但在使用 .innerHTML 调用将此数据动态附加到 div 时不起作用。

下面我将计数器代码应用于.count 类的所有元素，我希望此计数器可以在 id = "users" 的div 上使用document.getElementById('users').innerHTML = 300; 这不起作用。

但以下工作：<div id="users" class="count">300</div>

$('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 5000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
     });

<div id="users" class="count"></div>

document.getElementById('users').innerHTML = 300;

我在使用document.getElementById('users').innerHTML = 300; 时得到的输出是 0，但这是出乎意料的。我有几个类 count 的元素依赖于这个计数器。

对此的任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html counter

【解决方案1】：

我不完全确定“我希望这个计数器工作......”是什么意思，但这是否能处理您的用例？：

const users = document.getElementById("users");
users.innerHTML = "300";
//users.addEventListener("change", console.log(users.innerHTML));

$('.count').each(function () {
  let num = users.innerHTML; // Sets the value dynamically
  $(this).prop('Counter', num).animate({
    Counter: $(this).text()
  }, {
    duration: 5000,
    easing: 'swing',
    step: function (now) {
      $(this).text(Math.ceil(now));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="users" class="count">0</p>

【讨论】：

【解决方案2】：

@Ben you need to set the innerHTML before you call the counter animation 
document.getElementById('users').innerHTML = 300;

$('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 5000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
     });

【讨论】：

【解决方案3】：

您可能想在.each 代码之前写document.getElementById('users').innerHTML = 300;，因为.innerHTML 适合我

document.getElementById('users').innerHTML = 300;
$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 5000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="users" class="count"></div>

或者您可以添加DOMSubtreeModified 事件，因此当子树发生更改时，您的函数将被触发（one 是触发事件一次，因为我们不希望子树事件再次触发）：

$('.count').one("DOMSubtreeModified", function() {
  $('.count').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 5000,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now));
      }
    });
  });
});
document.getElementById('users').innerHTML = 300;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="users" class="count"></div>

【讨论】：