从零到百分比的jQuery动画数字计数器

Question

我工作的项目，我想把jQuery动画计数器从零到百分比值- Javascript动画在结果页，值是动态的从数据库？

​

function timer() {
  if (animator.curPercentage < animator.targetPercentage) {
    animator.curPercentage += 1;
  } else if (animator.curPercentage > animator.targetPercentage) {
    animator.curPercentage -= 1;
  }

  $(animator.outputSelector).text(animator.curPercentage + "%");

  if (animator.curPercentage != animator.targetPercentage) {
    setTimeout(timer, animator.animationSpeed)
  }
}

function PercentageAnimator() {
  this.animationSpeed = 50;
  this.curPercentage = 0;
  this.targetPercentage = 0;
  this.outputSelector = ".countPercentage";

  this.animate = function(percentage) {
    this.targetPercentage = percentage;
    setTimeout(timer, this.animationSpeed);
  }
}

var animator = new PercentageAnimator();
animator.curPercentage = 40;
animator.animate(70);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="countPercentage">98%</span>
<span class="countPercentage">92%</span>
<span class="countPercentage">12%</span>
<span class="countPercentage">67%</span>

​

问题是jQuery函数PercentageAnimator可以工作，但只能工作到70？

如何在animator.animate(70)而不是70中获得每个类70的动态值？

Jsfiddle完整代码

https://jsfiddle.net/fdharsi/bx9pbLpd/10/

问题现在已经得到修正，这里更新了jsfiddle

https://jsfiddle.net/fdharsi/bx9pbLpd/11/

Answer 1

您可以简单地将您的<span>元素封装在一个div中，例如：

<div class='percents'>
    <span class="countPercentage" data-value=98">98%</span>
    <span class="countPercentage" data-value=92">92%</span>
    <span class="countPercentage" data-value=12">12%</span>
    <span class="countPercentage" data-value=67">67%</span>
</div>

然后，您可以使用JQuery循环该div的子程序，如下所示：

$('.percents').children().each(function() {
    animator.animate($(this).data('value'));
});

你甚至可以简单地做$('.countPercentage').each()，但我还没查过.

但是这可能不是你应该做的.你到底想做什么？