1

ここに私のHTMLがあります:

<li class="mega-menu-counter mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-align-bottom-left mega-menu-flyout mega-menu-item-12028 menu-counter" id="mega-menu-item-12028">
   <a class="mega-menu-link" href="https://createandgo.com/blog-income-report/" tabindex="0">August 2019 <div>$<span class="counter">111,926.06</span></div><div>Blog Income Report</div></a>
</li>

そして、ここに私のJavaScriptがあります:

<script>
$('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(this.Counter.toFixed(2));
    }
    }
  });
});
</script>

サイトのヘッドに次のリソースをロードしています。

<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.min.js"></script>

カウンターが機能しない理由を誰か教えてもらえますか? ここに画像の説明を入力

4

1 に答える 1

1

  • replace(/,/g, '')- 通貨形式を数値形式に変換します

  • toLocaleString(...)- 数値を通貨形式に変換します

$('.count').each(function() {
  var $this = $(this);
  jQuery({
    Counter: 0
  }).animate({
    Counter: $this.text().replace(/,/g, '')
  }, {
    duration: 1000,
    easing: 'swing',
    step: function() {
      $this.text(toCurrencyFromat(this.Counter));
    },
    complete: function() {
      $this.text(toCurrencyFromat(this.Counter));
    }
  });
});

function toCurrencyFromat(num) {
  return (num).toLocaleString('en-US', {
    currency: 'USD',
    maximumFractionDigits: 2
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.min.js"></script>

<li class="mega-menu-counter mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-align-bottom-left mega-menu-flyout mega-menu-item-12028 menu-counter" id="mega-menu-item-12028">
  <a class="mega-menu-link" href="https://createandgo.com/blog-income-report/" tabindex="0">August 2019 <div>$<span class="count counter">111,926.06</span></div><div>Blog Income Report</div></a>
</li>

于 2019-09-14T14:43:26.543 に答える