Question

我正在创建一个数字计数器（从0到一个值），如果用逗号分隔，我在获取数字时会遇到一些麻烦。

我发现了一些潜在的修复方法，例如toLocaleString，但是我无法让它工作 - 有人能指出我正确的方向吗？

目前，当我使用130,000时，它会返回NaN。

谢谢！

$('.panel-text-style-c').each(function() {

  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 2000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now).toString());
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>

以上

Answer 1

在JS中，,无法用于要解析为整数的值。这就是您收到NaN输出的原因。

要解决此问题，请先使用replace()删除逗号，然后再将其提供给Counter媒体资源：

$('.panel-text-style-c').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text().replace(/,/g, '')
  }, {
    duration: 2000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now).toLocaleString());
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>

Answer 2

试试这段代码：

$('.panel-text-style-c').each(function() {
  var num =   $(this).text().replace(',', '');
  
  $(this).prop('Counter', 0).animate({
    Counter: num
  }, {
    duration: 2000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now).toString());
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>

jQuery数字计数器不接受逗号

2 个答案: