Counter Effect in jQuery, используемый для отображения числа, сгенерированного из объекта get API, показывает ошибку isNaN - PullRequest
Новая
       4

Counter Effect in jQuery, используемый для отображения числа, сгенерированного из объекта get API, показывает ошибку isNaN

0 голосов
/ 12 марта 2020

Я хотел показать число, которое я получил от моего API, которое я получаю с помощью JSON. Я хотел бы поставить противоэффект там, и он показывает "isNaN". URL API возвращает объект и сохраняет общее число в data.data. Может ли кто-нибудь помочь мне с этим, пожалуйста? 

<p class="Count member-count" style="color:#BA1823; font-size: 40px;">
                <script>
                    $.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
                        var text = `${data.data}<br>`
                        $(".member-count").html(text);
                    });
                </script>
            </p>
            <script>
                $('.Count').each(function () {
                  var $this = $(this);
                  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                    duration: 1000,
                    easing: 'swing',
                    step: function () {
                      $this.text(Math.ceil(this.Counter));
                    }
                  });
                });
            </script>

1 Ответ

0 голосов
/ 12 марта 2020

Проблема в том, что вызов AJAX является асинхронным, поэтому each() l oop, который содержит анимацию logi c, запускает до запроса и элемента p имеет какой-либо контент.

Чтобы это исправить, поместите вызов each() в обратный вызов AJAX: 

<p class="Count member-count"></p>

$.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
  $(".member-count").html(`${data.data}<br>`);

  $('.Count').each(function() {
    var $this = $(this);
    jQuery({
      Counter: 0
    }).animate({
      Counter: data.data
    }, {
      duration: 1000,
      easing: 'swing',
      step: function() {
        $this.text(Math.ceil(this.Counter));
      }
    });
  });
});

.member-count {
  color: #BA1823;
  font-size: 40px;
}

Стоит также отметить, что не следует ставить <script> теги в середине вашей HTML структуры. Либо поместите их в <head>, либо непосредственно перед </body>. Точно так же не помещайте CSS правила во встроенные атрибуты style. Поместите их во внешние. css файлы. Вот jsFiddle с полными исправленными HTML и JS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...