如何实现基于数据库动态值的jQuery逐元素百分比动画

没问题，我来帮你调整代码，让每个.countPercentage元素都能基于自己的数据库动态值完成从0到目标百分比的动画：

修改思路 #

核心就是把原来“统一用固定值70%”的逻辑，改成遍历每个元素并读取它自身的目标值，然后针对每个元素单独执行动画。

修改后的完整代码 #

function PercentageAnimator() {
  // 遍历每个.countPercentage元素
  $('.countPercentage').each(function() {
    // 提取当前元素的目标百分比：去掉%符号，转成整数
    const targetPercent = parseInt($(this).text().replace('%', ''), 10);
    
    // 对当前元素执行从0到目标值的动画
    $(this).prop('Counter', 0).animate({
      Counter: targetPercent
    }, {
      duration: 1000, // 动画时长，可根据需求调整
      easing: 'swing', // 动画缓动效果
      step: function(now) {
        // 实时更新元素文本，Math.ceil确保显示整数百分比
        $(this).text(Math.ceil(now) + '%');
      }
    });
  });
}

关键修改点说明 #

• 遍历每个元素：用.each()方法逐个处理.countPercentage，保证每个元素的动画独立执行
• 动态获取目标值：通过$(this).text()读取元素原本的数据库渲染值，去掉%后转成数字，作为当前元素的动画目标值
• 替换固定值：把原来硬编码的70换成动态获取的targetPercent，让每个元素都能动画到自己专属的目标百分比

使用注意 #

确保你的HTML里，每个.countPercentage元素初始渲染的是最终的百分比文本（比如<span class="countPercentage">65%</span>），这样函数才能正确提取到目标数值。

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