Question

我正在尝试实施jQuery animateNumber，我让它像演示一样正常工作。但是，我想修改它以便从HTML中提取数字，而不是在脚本中设置它。我尝试了以下内容，但它只是显示了＆＃34; NAN。＆＃34;我做错了什么？

    <div class="stat-title animate-number">$16,309</div>

    <script>
    $('.animate-number').each(function(){

        var value = new Number;

        // Grab contents of element and turn it into a number
        value = $(this).text();
        value = parseInt(value);

        // Set the starting text to 0
        $(this).text('0');


        $(this).animateNumber(
        {
            number: value,

        },
        1000
        )

    });
</script>

Answer 1

ParseInt由于$字符而失败。另外，逗号正在搞乱parseInt并给你16而不是16309的值。之后，动画似乎正在运行。此外，您不必将其替换为0，因为animateNumber会自动从0开始。这是我迄今为止在JSfiddle上的工作：

http://jsfiddle.net/0m9828kn/1

$('.animate-number').each(function(){

    var value = $(this).text();
    value = value.substring(1, value.length);//Remove $ sign
    value = value.replace(/,/g, "");//Remove all commas
    value = parseInt(value);

    //$(this).text("0"); //This part isn't actually necessary

    $(this).animateNumber(
        {
            number: value
        },
        1000
    )
});

Answer 2

看起来问题是ParseInt在美元符号上窒息。然后当你删除它时，它只读取逗号和动画为16.将它们全部取出，然后就可以了。

value = $(this).text().replace(/[\,\$]/g,'');

但是，您需要包含此选项才能恢复逗号：

var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$(this).animateNumber(
    {
        number: value,
        numberStep: comma_separator_number_step
    },
    1000
)

要获得美元符号，您可以将html更改为以下内容：

<div>$<span class="stat-title animate-number">16,309</span></div>

如何让jQuery animateNumber动态提取值？

2 个答案: