如何让 CounterUp jQuery 插件运行只有一次？

Question

我正在使用一个非常流行的 jQuery 计数器插件来为我正在构建的网站添加更多功能。插件运行很棒，我没有收到任何错误，但每当您向下滚动到它时，插件运行就会出现。问题是我希望它只运行一次，无论你滚动多少次，当然除非页面被刷新。该插件使用 Waypoints.js 来激活它的计数器功能，我正在使用 CDN 来调用它们。我只是很好奇是否有可能只是运行一次...任何帮助表示赞赏。

我的功能很简单，但如下所示：

$('.bold').counterUp({
delay: 10,
time:   1000,
triggerOnce:true
})

触发一次明显不行了。 HTML 如下：

<p class"bold">200</p>

它被包装在 document.ready() 脚本中。

我不知道问题出在 Waypoints 还是 JS 但几乎没有关于如何运行计数器一次的文档...

Answer 1

为了让您的计数器正常工作，不幸的是您需要将 waypoints 降级到 v2.0.3。我还将 jQuery 降级为 v1.12.4。我同意降级是不好的做法，但与此同时，您可以在 github.

上提交问题请求

您也可以尝试使用不同的版本进行试验，看看您可以使用的不会产生错误的最高版本。

jQuery(document).ready(function($) {
  $('.bold').counterUp({
    delay: 10,
    time: 1000,
  });
});

div {
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>


<div class="one"></div>

<div class="two">
  <p class="bold">100</p>
</div>

如何让 CounterUp jQuery 插件运行只有一次？

How to make CounterUp jQuery plugin run only once?

html

jquery

jquery-plugins

如何让 CounterUp jQuery 插件 运行 只有一次？

How to make CounterUp jQuery plugin run only once?

html

jquery

jquery-plugins

如何让 CounterUp jQuery 插件运行只有一次？