if else statement и JQuery

Question

Я пытаюсь сократить свой код, используя if else, а не просто целую последовательность операторов if, как я обычно делаю, однако я где-то ошибся и не понимаю, что я делаю неправильно , В идеале этот фрагмент кода должен иметь поле postQuantity, которое имеет значения «Select Fence Height», «Select Fence Style», «Select Picket Size», а затем результат ввода после того, как они будут введены через уравнение JQuery. Если кто-то может указать, что я делаю неправильно, мы будем очень благодарны! Спасибо! Вот JSFiddle - http://jsfiddle.net/gv0029/8PR9C/ и вот код:

HTML:

<form> 
<fieldset id="fence"> 
    <div name="inputFence" class="inputFence"> 
     <legend><strong>Fence Description</strong> 
     </legend> 
     <label>Footage: 
      <input name="footage_1" class="footage" /> 
     </label> 
     <select name="fenceHeight_1" class="fenceHeight"> 
      <option value="select">Select Fence Height</option> 
      <option value="6" id="fH6">6 Ft.</option> 
      <option value="8" id="fH8">8 Ft.</option> 
     </select> 
     <select name="fenceStyle_1" class="fenceStyle"> 
      <option value="select">Style</option> 
      <option value="bnb" id="bnb">Board on Board</option> 
      <option value="sbs" id="sbs">Side By Side</option> 
     </select> 
     <select name="picketSize_1" class="picketSize"> 
      <option value="select">Picket Size</option> 
      <option value="1x3.5x6" id="1x4">1 x 3.5 x 6</option> 
      <option value="1x4x6" id="1x4">1 x 4 x 6</option> 
      <option value="1x5x6" id="1x4">1 x 5 x 6</option> 
      <option value="1x5.5x6" id="1x4">1 x 5.5 x 6</option> 
      <option value="1x6x6" id="1x4">1 x 6 x 6</option> 
     </select> 
     <legend><strong>Post Type</strong> 
     </legend> 
     <label>Picket Quantity 
      <input name="picketQuantity_1" class="picketQuantity" /> 
     </label> 
    </div> 
</fieldset> 

</form> 

JS:

//Quantity for Pickets   
$(document.body).on('keypress keydown keyup change', '[class^="footage"],[class^="fenceHeight"], [class^="picketSize"],[class^="fenceStyle"], [class^="picketQuantity"]', function() { 

      var parts = $(this).attr('name').split("_"); 
       fenceNumber = parts[1], 

       footage = parseFloat($(":input[name='footage_" + fenceNumber + "'" + ']').val(), 10), 
       fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').find('option:selected').val(), 
       fenceStyle = $(":input[name='fenceStyle" + fenceNumber + "'" + ']').find('option:selected').val(), 
       picketSize = $(":input[name='picketSize" + fenceNumber + "'" + ']').find('option:selected').val(),    
       picketQuantity = $(":input[name='picketQuantity_" + fenceNumber + "'" + ']'), 
       total = ''; 

     if (!isNaN(Number(fenceHeight))) { 
      if (fenceStyle == 'sbs') { 
       if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") { 
        total = (((Math.ceil((footage * 12)/3.5)) * 1.05)); 
       } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") { 
        total = (((Math.ceil((footage * 12)/5.5)) * 1.05)); 
       } else { 
        total = "Select Picket Size"; 
       } 
        picketQuantity.val(total); 
      } else if (fenceStyle == 'bnb') { 
       if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") { 
        total = (((Math.ceil((footage * 12)/8.5)) * 3) * 1.05); 
       } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") { 
        total = (((Math.ceil((footage * 12)/10.5)) * 3) * 1.05); 
       } else { 
        total = "Select Picket Size"; 
       } 
        picketQuantity.val(total); 
      } else { 
       picketQuantity.val("Select Fence Style"); 
      } 
     } else { 
      picketQuantity.val("Select Fence Height"); 
     } 

}); 

Answer 1

Похоже, вы просто пропустили добавив «_», чтобы некоторые из ваших запросов атрибутов ...

//Quantity for Pickets   
$(document.body).on('keypress keydown keyup change', '[class^="footage"],[class^="fenceHeight"], [class^="picketSize"],[class^="fenceStyle"], [class^="picketQuantity"]', function() { 

      var parts = $(this).attr('name').split("_"); 
       fenceNumber = parts[1], 

       footage = parseFloat($(":input[name='footage_" + fenceNumber + "'" + ']').val(), 10), 
       fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').find('option:selected').val(), 
       fenceStyle = $(":input[name='fenceStyle_" + fenceNumber + "'" + ']').find('option:selected').val(), 
       picketSize = $(":input[name='picketSize_" + fenceNumber + "'" + ']').find('option:selected').val(),    
       picketQuantity = $(":input[name='picketQuantity_" + fenceNumber + "'" + ']'), 
       total = ''; 

     if (!isNaN(Number(fenceHeight))) { 
      if (fenceStyle == 'sbs') { 
       if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") { 
        total = (((Math.ceil((footage * 12)/3.5)) * 1.05)); 
       } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") { 
        total = (((Math.ceil((footage * 12)/5.5)) * 1.05)); 
       } else { 
        total = "Select Picket Size"; 
       } 
        picketQuantity.val(total); 
      } else if (fenceStyle == 'bnb') { 
       if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") { 
        total = (((Math.ceil((footage * 12)/8.5)) * 3) * 1.05); 
       } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") { 
        total = (((Math.ceil((footage * 12)/10.5)) * 3) * 1.05); 
       } else { 
        total = "Select Picket Size"; 
       } 
        picketQuantity.val(total); 
      } else { 
       picketQuantity.val("Select Fence Style"); 
      } 
     } else { 
      picketQuantity.val("Select Fence Height"); 
     } 

}); 

Answer 2

Есть много способов, вы можете сделать это. Может быть, попробовать что-то вроде this-

fenceCalculations = { 
    "sbs": function(args) 
    { 
     // do stuff 
     // return size 
    }, 
    "bnb": function(args) 
    { 
     // do stuff 
     // return size 
    } 
} 

var size = fenceCalculations[fenceStyle](args);