0

我正在尝试构建一个简单的小费计算器，并希望是否有人知道如何缩短我已经拥有的代码或有任何改进它们的建议。

这是代码：

    $(document).ready(function () {

    // Five Percent
    $('#five').mouseover(function () {
        var yourBill = $('#bill_amount').val();
        var fivePercent = yourBill * 0.05;
        var fiveRounded = fivePercent.toFixed(2)
        $('#you_pay').text('$' + fiveRounded);
    });

    // Ten Percent
    $('#ten').mouseover(function () {
        var yourBill = $('#bill_amount').val();
        var tenPercent = yourBill * 0.10;
        var tenRounded = tenPercent.toFixed(2)
        $('#you_pay').text('$' + tenRounded);
    });

    // Fifteen Percent
    $('#fifteen').mouseover(function () {
        var yourBill = $('#bill_amount').val();
        var fifteenPercent = yourBill * 0.15;
        var fifteenRounded = fifteenPercent.toFixed(2)
        $('#you_pay').text('$' + fifteenRounded);
    });

    // Twenty Percent
    $('#twenty').mouseover(function () {
        var yourBill = $('#bill_amount').val();
        var twentyPercent = yourBill * 0.20;
        var twentyRounded = twentyPercent.toFixed(2)
        $('#you_pay').text('$' + twentyRounded);
    });

    // Twenty Percent
    $('#twenty-five').mouseover(function () {
        var yourBill = $('#bill_amount').val();
        var twentyFivePercent = yourBill * 0.25;
        var twentyFiveRounded = twentyFivePercent.toFixed(2)
        $('#you_pay').text('$' + twentyFiveRounded);
    });

    // Back to $0.00
    $('a').mouseout(function () {
        $('#you_pay').text('$0.00');
    });

    // Starts with $0.00
    $('#you_pay').text('$0.00');
});

你可以在这里看到 jsFiddle：http: //jsfiddle.net/antwonlee/JXpHe/

4

3 回答 3

3

通过更改标记以使用 data-* 属性，您可以将其简化为；

HTML：

<div id="tip_percentage"> 
     <a href="" data-per="5">5%</a>
     <a href="" data-per="10">10%</a>
     <a href="" data-per="15">15%</a>
     <a href="" data-per="20">20%</a>
     <a href="" data-per="25">25%</a>
</div>

JS：

$(document).ready(function () {
    var $youPay = $('#you_pay'), $billAmt = $('#bill_amount'); //cache it here so that you dont want to create the object again and again.

    $('#tip_percentage > a').on('mouseover', function () {
        var tip = ($billAmt.val() * ($(this).data('per') / 100)).toFixed(2);
        $youPay.text(tip);
    }).on('mouseleave', function () {
        $youPay.text('$0.00');
    });
});

小提琴

于 2013-09-23T21:09:29.787 回答
2

为您的商品添加数据标签怎么样？http://jsfiddle.net/bhlaird/W3QPf/1/

<a href="#" class="amount" id="five" data-amount="5">5%</a>

$('.amount').mouseover(function () {
    var yourBill = $('#bill_amount').val();
    var percent = parseInt($(this).data('amount')) / 100 * yourBill;
    var rounded = percent.toFixed(2)
    $('#you_pay').text('$' + rounded);
});
于 2013-09-23T21:10:06.957 回答
0

尝试以下

$(document).ready(function () {
    function createBillCalculator(percent) {
        return function () {
            var yourBill = Number($('#bill_amount').val());
            var xPercent = yourBill * percent / 100;
            $('#you_pay').text('$' + (Math.round(100 * (yourBill + xPercent))) / 100);
        };
    }

    $.each({
        'five': 5,
        'ten': 10,
        'fifteen': 15,
        'twenty': 20,
        'twenty-five': 25
    }, function (i, v) {
        $('#' + i).mouseover(createBillCalculator(v));
    });

    // Back to $0.00
    $('a').mouseout(function () {
        $('#you_pay').text('$0.00');
    });

    // Starts with $0.00
    $('#you_pay').text('$0.00');
});

见http://jsfiddle.net/JXpHe/17/

于 2013-09-23T21:09:36.380 回答