Comment réparer et refactorisons ce script calculatrice JavaScript/JQuery

Question

J'ai décidé d'essayer d'en savoir plus JQuery et voici ce que je suis venu avec.

Il devrait être assez simple emploi, mais je ne peux pas obtenir ma tête autour d'elle. Je peux l'ajouter, mais quand je change un paquet, le prix ne cesse de monter. Je sais que je dois ajouter une certaine logique pour décrémenter le compteur, mais je pense que de nouveaux yeux seraient géniaux.

Comment décririez-vous factoriser mon code?

en direct: 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

Eh bien, je ne suis pas tout à fait sûr de ce que votre plan en est, mais voici quelques façons de réduire ce bas quelques crans en taille:

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

En outre, comme il semble que vous utilisiez plus ou moins les variables total et total_support en tant qu'incrémeurs parallèles suivant la même valeur, serait-il préférable d'utiliser à la place:

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