Добавление запятой в анимированные номера jQuery - PullRequest
Новая
       20

Добавление запятой в анимированные номера jQuery

0 голосов
/ 07 сентября 2018

Я использую скрипт 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-n в HTML, а затем работает, как волшебство. Если у меня есть 100,000 в атрибуте data-n, то оно сокращается до 100, когда числа оживляют.

Так что да, я не уверен, что мне нужно изменить этот скрипт, чтобы он мог вместить запятую в атрибуте данных или есть что-то еще, что мне, возможно, придется сделать после этого?

1 Ответ

0 голосов
/ 08 сентября 2018

Хорошо, так что, пройдя еще немного, я смог найти решение.

Я нашел это: 

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

до конца анимации.

В целом, это появляется , чтобы обеспечить результат, который я ищу. Поскольку мне нужно приписать его только одному номеру (пока), он работает как надо.

...