jQuery实现的数字计数器停留在0不向上计数该如何解决？

计数器不生效的核心原因及修复方案 #

1. HTML元素class属性重复定义，counter类未生效 #

你的<h4>标签重复写了两次class属性，浏览器只会识别第一个class属性，第二个声明的counter类会被直接忽略，导致jQuery的$('.counter')选择器找不到对应元素，计数逻辑完全不会触发。

错误写法：

<h4 class="txt-primary  fs40 mb-0" class="counter" data-count="150">0</h4>

修复方式：合并两个class属性即可

<h4 class="txt-primary fs40 mb-0 counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>

2. JS执行时机早于DOM渲染完成 #

你把JS代码放在head段加载时，页面DOM还没完成渲染，代码执行时页面还没有生成对应的counter元素，选择器匹配为空自然不会执行动画。
修复方式二选一：

• 把你的JS代码挪到</body>标签之前，等所有DOM元素加载完成后再执行
• 把JS代码包裹在jQuery的DOM就绪回调中：

$(document).ready(function() {
  $('.counter').each(function() {
    var $this = $(this),
      countTo = parseInt($this.attr('data-count'), 10); // 额外把字符串转成数字，避免类型异常

    $({countNum: parseInt($this.text(), 10)}).animate({
        countNum: countTo
      },
      {
        duration: 8000,
        easing: 'linear',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }
      });
  });
})

可选优化点 #

你原来代码里从data-count和元素文本取到的值都是字符串类型，虽然jQuery的animate方法会自动做隐式类型转换，还是建议手动转成数字类型，避免特殊场景下的计数异常，上面给出的修复代码已经做了对应处理。

内容的提问来源于stack exchange，提问作者cosmokid