Question

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

以下是代码：

    $(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/

Answer 1

通过更改标记以使用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');
    });
});

<强> Fiddle

Answer 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);
});

Answer 3

尝试以下

$(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/

用Jquery提示计算器

3 个答案: