1

HTML に 2 つの価格がリストされています。1 つは総合計価格で、もう 1 つは割引価格です (割引価格は、割引が適用された総合計です)。

 <ul>
<li class="discounted-price">180.99</li>
<li class="special">Grand Total: £<b id="price">186.95</b></li>
</ul>

<a class="trigger" href="#">Link</a>

ユーザーがリンクをクリックすると、総合計価格の数字が割引価格の値まで「スクロールダウン」(レジのように) されます。

Jqueryを使用してそれを達成する方法のこの例を見つけました。ただし、この例では、その例は価格ではないため、コンマで区切られた多くの桁があります。

不要なコードをすべて削除しようとしましたが、現在の価格は次のようになります: £180.99008006406564

価格を小数点以下 2 桁に制限するにはどうすればよいですか。Javascript には小数点以下の桁数を制御するために使用されるtofixed()ツールがあることは知っていますが、アニメーションを壊さずにコードで機能させることはできないようです。

これが私のコードです：

$(document).ready(function () {

    // Animate the element's value from x to y:
    $('.trigger').live('click', function () {
        var originalprice = $('#price').text();
        var discount = $('.discounted-price').text();

        $({
            someValue: originalprice
        }).animate({
            someValue: discount
        }, {
            duration: 3000,
            easing: 'swing',
            // can be anything
            step: function () {
                $('#price').text(this.someValue);
            }
        });

    });
});

これがJSFIDDLEです

4

2 に答える 2

2

私はこのようなことをします：

jQuery(function($) {
    $(document).on('click', '.trigger', function () {
        var originalprice = parseFloat($('#price').text()),
            discount      = parseFloat($('.discounted-price').text());

        $({someValue: originalprice})
            .animate({
                someValue: discount
            }, {
                duration: 3000,
                easing: 'swing',
                step: function (now) {
                    $('#price').text( parseInt((now * 100),10) / 100);
                }
        });
    });
});

フィドル

于 2013-07-04T18:19:17.303 に答える
1

stepコールバックでこのアプローチを使用します。

$('#price').text(parseFloat(this.someValue).toFixed(2));

jsフィドル

于 2013-07-04T18:12:41.393 に答える