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

为了让您的计数器正常工作，遗憾的是您需要将航点降级到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插件只运行一次？

1 个答案: