将逗号添加到jQuery动画数字

Question

我在这里使用jQuery脚本。到目前为止，它的效果很好，但我唯一想知道的是如何将逗号写入其中一个值。

由于滚动时数字会生成动画，因此让浏览器检查事后的整数是很棘手的。我已经阅读了一些会添加逗号的帖子（在这种情况下我试图获取100,000）但是它不起作用，因为浏览器最初看不到那个整数（从0开始）。

这是我向下滚动页面时用来调用动画的脚本：

$(function () {
    var fx = function fx() {
      $(".stat-number").each(function (i, el) {
        var data = parseInt(this.dataset.n, 10);
        var props = {
          "from": {
            "count": 0
          },
          "to": {
            "count": data
          }
        };
        $(props.from).animate(props.to, {
          duration: 500 * 1,
          step: function (now, fx) {
            $(el).text(Math.ceil(now));
          },
          complete:function() {
            if (el.dataset.sym !== undefined) {
              el.textContent = el.textContent.concat(el.dataset.sym)
            }
          }
        });
      });
    };

    var reset = function reset() {
      console.log($(this).scrollTop())
      if ($(this).scrollTop() > 950) {
        $(this).off("scroll");
        fx()
      }
    };

    $(window).on("scroll", reset);
  });

它从HTML中的数据属性data-n获取值，然后从那里开始工作。如果我在100,000属性中有data-n，那么当数字生动时它会在100处缩短它。

所以，是的，我不确定是否需要修改此脚本，以便它可以容纳数据属性中的逗号，或者是否还有其他事情我可能需要在事后做？

Answer 1

好的，所以经过深入研究后，我能够提出一个解决方案。

我找到了这个：

  $.fn.digits = function(){
    return this.each(function(){
      $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
    })
  }

然后在我的HTML中添加了一个额外的类。

然后我迷上了complete:function并补充说：

$(".class-i-added").digits();

到动画结束。

总的来说，这似乎提供了我正在寻找的结果。因为我只需要将它归因于一个数字（到目前为止），它就可以正常工作。