Jquery number counterは文字列で結合します

Question

これらの数字は機能していますが、文字 "T"は表示されないように置き換えられています。皆さんは、それをどうやって稼働させるか考えていますか？どうもありがとうございました。

function commaSeparateNumber(val){ 
 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
 
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
 
    } 
 
    return val; 
 
} 
 

 
$('.number').each(function() { 
 
    $(this).prop('Counter',0).animate({ 
 
     Counter: $(this).text() 
 
    }, { 
 
     duration: 8000, 
 
     easing: 'swing', 
 
     step: function (now) { 
 
      $(this).text(commaSeparateNumber(Math.ceil(now))); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
<div class="count"><div class="number">30</div></div> 
 
<div class="text">text 1</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div class="number">3000</div></div> 
 
<div class="text">text 2</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div class="number">700<span>T</span></div></div> 
 
<div class="text">text 3</div>

Answer 1

あなたのコードの問題は、それはDOM構造を全体交換したDOM構造が更新されているように、「T」を含むスパンを含んでいます。ここ は、あなたの更新されたコード

function commaSeparateNumber(val){ 
 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
 
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
 
    } 
 
    return val; 
 
} 
 

 
$('.number').each(function() { 
 
    $(this).prop('Counter',0).animate({ 
 
     Counter: $(this).text() 
 
    }, { 
 
     duration: 8000, 
 
     easing: 'swing', 
 
     step: function (now) { 
 
      $(this).text(commaSeparateNumber(Math.ceil(now))); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
<div class="count"><div><span class="number">30</div></div> 
 
<div class="text">text 1</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div><span class="number">3000</span></div></div> 
 
<div class="text">text 2</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="count"><div><span class="number">700</span><span>T</span></div></div> 
 
<div class="text">text 3</div>