如何为jQuery滚动数字动画添加"+"与"%"符号？

方案1：利用插件回调动态添加后缀 #

如果你的easy_number_animate版本支持onUpdate或onComplete回调，可以针对每个元素的索引判断，添加对应后缀：

// 遍历每个数字元素
$('.num-item').each(function(index) {
  const $elem = $(this);
  // 前3个元素用"+"，最后一个用"%"
  const suffix = index < 3 ? '+' : '%';

  $elem.easy_number_animate({
    // 实时更新数字时添加后缀，确保滚动过程中后缀持续显示
    onUpdate: function(currentNumber) {
      $elem.text(currentNumber + suffix);
    },
    // 动画完成后再确认一次，避免异常情况
    onComplete: function(finalNumber) {
      $elem.text(finalNumber + suffix);
    }
  });
});

方案2：HTML结构分离（更稳定，不依赖插件回调） #

如果不确定插件是否支持回调，或者想避免回调兼容性问题，可以把数字和后缀拆分到不同标签中，让插件只负责数字部分的动画：

调整HTML结构：

<div class="num-item">
  <span class="num-content" data-end-value="11"></span>
  <span class="num-suffix">+</span>
</div>
<div class="num-item">
  <span class="num-content" data-end-value="300"></span>
  <span class="num-suffix">+</span>
</div>
<div class="num-item">
  <span class="num-content" data-end-value="140"></span>
  <span class="num-suffix">+</span>
</div>
<div class="num-item">
  <span class="num-content" data-end-value="40"></span>
  <span class="num-suffix">%</span>
</div>

初始化插件：

// 仅对数字内容元素初始化动画
$('.num-content').each(function() {
  $(this).easy_number_animate({
    end_value: $(this).data('end-value')
  });
});

这种方式的优势是后缀始终存在，不会因动画回调失效导致显示异常，样式也更易控制。

注意事项 #

• 若你之前设置过插件的默认参数（如动画时长、延迟），初始化时记得保留这些配置
• 使用方案1时，需确认插件版本支持对应的回调函数，不确定的话可以查看插件源码或说明文档

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