用 jQuery 解决这个 Nan 问题

Question

我有一个计数器，但在一些问题上运行，这是我的代码：

 $(document).ready(function () { $('.counter1-up').each(function () { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="far fa-calendar"></i> <span data-toggle="counter1-up" class="counter1-up">50+</span> </div> </div> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="fas fa-project-diagram"></i> <span data-toggle="counter1-up" class="counter1-up">48+</span> </div> </div> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="far fa-question-circle"></i> <span data-toggle="counter1-up" class="counter1-up">1252+</span> </div> </div> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="fas fa-users"></i> <span data-toggle="counter1-up" class="counter1-up">171+</span> </div> </div> </div> </div>

如何使用 jQuery 或 JS 解决此问题？ 我知道我可以用 CSS 和 HTML 解决这个问题，但我想用 JS 代码来解决。 解决这个问题的最佳方法是什么？ 谢谢你们

Answer 1

那是因为您的文本（例如50+ ）无法转换为数字。 一个快速的解决方法是将+移到<span>元素之外，其中将发生数字补间：

 $(document).ready(function () { $('.counter1-up').each(function () { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="far fa-calendar"></i> <span data-toggle="counter1-up" class="counter1-up">50</span>+ </div> </div> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="fas fa-project-diagram"></i> <span data-toggle="counter1-up" class="counter1-up">48</span>+ </div> </div> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="far fa-question-circle"></i> <span data-toggle="counter1-up" class="counter1-up">1252</span>+ </div> </div> <div class="col-lg-3 col-md-6"> <div class="count-card"> <i class="fas fa-users"></i> <span data-toggle="counter1-up" class="counter1-up">171</span>+ </div> </div> </div> </div>