Jquery로 팁 계산기

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

를 데이터 -이 * 당신이이 작업을 단순화 할 수 속성을 사용하는 마크 업을 변경;

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

다음과 같이 해보십시오

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

Answer 3

항목에 데이터 태그를 추가하는 것은 어떻습니까? 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); 
});