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

Question

我正在尝试使用 jquery 制作一个计数器。当数据div直接传递到 中时，此计数器起作用，但在将此数据动态附加到divusing.innerHTML调用时不起作用。下面我将计数器代码应用于.count类的所有元素，并且我希望这个计数器div使用 id = "users" 使用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依赖于这个计数器。对此的任何帮助将不胜感激。

Answer 1

@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));

            }

        });

     });