Question

以下jQuery和HTML的问题是，当我滚动到#amount_counter部分时，类.count-data的编号开始增加并计数，但是在加载到数据值后，它返回停止为空数。我可以知道错误在哪里吗？

$(window).load(function() {
  var scrollTop = $("#amount_counter");
  
  $(window).scroll(function() {
    var topPos = $(this).scrollTop();
    
    if (topPos > 400) {
      $('.count-data').each(function() {
        $(this).prop('Counter', 0).animate({
          Counter: $(this).text()
        }, {
          duration: 4000,
          easing: 'swing',
          step: function(now) {
            $(this).text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
          }
        });
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amount_counter">
  <div class="row">
    <ul>
      <li>
        <span class="count-data">24</span>
      </li>
      <li>
        <span class="count-data">400000000</span>
      </li>
    </ul>
  </div>
</div>

Answer 1

您已经绑定了scroll事件，并为每个滚动检查了topPos > 400。条件达到后，您仍然可以进一步滚动，条件再次达到。这将在当前动画结束后安排的当前中间值再次触发animate调用。由于$(this).text()可能包含,，因此不再将其解析为数字，您将得到NaN。

只要首先满足条件，就分离事件侦听器：

$(window).load(function() {
  var scrollTop = $("#amount_counter");

  $(window).on("scroll", function() {
    var topPos = $(this).scrollTop();

    if (topPos > 400) {
      $(window).off("scroll");

      $('.count-data').each(function() {
        // …
      });
    }
  });
});

如果要使用其他值重新启动动画，请在animate选项中使用complete回调，然后再次绑定scroll。

数字增量jQuery显示空数错误

1 个答案: