Калькулятор чаевых с Jquery

Question

Калькулятор чаевых с Jquery

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/

Anthony Gawon Lee 23 сен. 2013, в 23:33

Источник

Теги:

jquery

3 ответа

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

Barbara Laird 23 сен. 2013, в 18:54

1

fyi..При использовании атрибута data и jiquery api вам не нужно его приводить. В этом случае это будет уже int.
PSL 23 сен. 2013, в 21:16
0

@PSL - Спасибо, я этого не знал.
Barbara Laird 23 сен. 2013, в 21:18
0

Добро пожаловать.. :)
PSL 23 сен. 2013, в 21:19
0

Спасибо вам, ребята, оба!
Anthony Gawon Lee 23 сен. 2013, в 21:35

Показать ещё 2 комментария

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/

Matteo Tassinari 23 сен. 2013, в 18:43

Ещё вопросы

fyi..При использовании атрибута data и jiquery api вам не нужно его приводить. В этом случае это будет уже int.

PSL · Accepted Answer · 2013-09-23T19-25-00.000Z

Изменив разметку, чтобы использовать атрибуты 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');
    });
});

скрипка

Ух ты. Огромное спасибо. Это потрясающе!