0

我正在使用这里的 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);
  });

它从data-nHTML 中的 data 属性中获取值，然后从那里开始发挥它的魔力。如果我有100,000属性，那么它会在数字动画时data-n缩短它。100

所以，是的，我不确定我是否需要修改这个脚本，以便它可以容纳数据属性中的逗号，或者在事后我可能需要做些什么？

4

1 回答 1

0

好的，所以在深入研究之后，我能够想出一个解决方案。

我找到了这个：

  $.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();

到动画结束。

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

于 2018-09-07T21:37:08.143 回答