如何修復和重構JavaScript/JQuery中的這個計算器腳本

Question

我決定嘗試和學習更多的JQuery，這裏是我想到的。

它應該是一個足夠簡單的工作，但我無法繞開它。我可以把它加起來，但是當我改變一個包裹的時候，價格纔會繼續上漲。我知道我必須添加一些邏輯來減少櫃檯，但我認爲一雙新的眼睛會很棒。

你會如何重構我的代碼？

直播：http://www.keithdonegan.com/jquery/calculate/

$(document).ready(function() 
{ 
    var bronze = 50; 
    var silver = 100; 
    var gold = 200; 

    var email_support = 20; 
    var email_telephone_support = 50; 
    var email_telephone_im_support = 80; 

    var total_support = 0; 
    var total = 0; 

    $('#total span').append(total); 

    $('input').click(function() 
    { 
     var input_id = $(this).attr('id'); 
     switch(input_id) 
     { 
     case 'bronze': 
      total = bronze; 
      $('#total span').empty().append(total = bronze + total_support); 
      break; 
     case 'silver': 
      total = silver; 
      $('#total span').empty().append(total = silver + total_support); 
      break; 
     case 'gold': 
      total = gold; 
      $('#total span').empty().append(total = gold + total_support); 
      break; 
     case 'email-support': 
      $('#total span').empty().append(total_support = email_support + total); 
      break; 
     case 'email-telephone-support': 
      $('#total span').empty().append(total_support = email_telephone_support + total); 
      break; 
     case 'email-telephone-im-support': 
      $('#total span').empty().append(total_support = email_telephone_im_support + total); 
      break; 
     default: 
      break; 
     } 
    }); 
}); 

Answer 1

嗯，我並不完全相信你的這個計劃是什麼，但這裏的大小切割下來幾個缺口的一些方法：

// inside of $input('click') 
// Since you are always calling this function, create a reference to it.. 
var tot_append = $('#total span').empty().append; 

//Later 
switch(input_id) 
{ 
    case "bronze": 
    case "silver": 
    case "gold": 
     // The above three have the same functional behavior, an eval 
     // would be the perfect way to make it all work on one line 
     tot_append(eval("total = total_support + " + input_id)); 
     break; 
    case 'email-support': 
    case 'email-telephone-support': 
    case 'email-telephone-im-support': 
     // See above. 
     tot_append(eval("total_support = total + " + input_id)); 
     break; 
} 

此外，由於它看起來像或多或少地使用變量total和total_support作爲跟蹤相同值的並行增量器，是否會更好地使用它：

// This would not need a switch at all. 
tot_append(eval("total += " + input_id));