根據下拉選項更改結果輸入 - jQuery + HTML

Question

我正在嘗試使用HTML和jQuery構建計算器。到目前爲止，我有：

HTML

<form accept-charset="UTF-8" action="#" id="calc" method="post"> 
    <div class="item-1"> 
     <label for="item-1">Item 1</label> 
     <input class="income" id="item-1" size="50" /> 
     <select id="select-item-1" class="select"> 
      <option value="daily">Daily</option> 
      <option value="weekly">Weekly</option> 
      <option value="monthly">Monthly</option> 
     </select> 
    </div> 
    <div class="item-2"> 
     <label for="item-2">Item 2</label> 
     <input class="income" id="item-2" size="50" /> 
     <select id="select-item-2" class="select"> 
      <option value="daily">Daily</option> 
      <option value="weekly">Weekly</option> 
      <option value="monthly">Monthly</option> 
     </select> 
    </div> 
    <div class="item-3"> 
     <label for="item-3">Item 3</label> 
     <input class="income" id="item-3" size="50" /> 
     <select id="select-item-3" class="select"> 
      <option value="daily">Daily</option> 
      <option value="weekly">Weekly</option> 
      <option value="monthly">Monthly</option> 
     </select> 
    </div> 
    <hr /> 
    <div class="grand-total"> 
     <label for="grand-total">Total :</label> 
     <input id="grand-total" size="50" disabled /> 
     <select id="grand-total-filter" class="select"> 
      <option value="daily">Daily</option> 
      <option value="weekly">Weekly</option> 
      <option value="monthly">Monthly</option> 
     </select> 
    </div> 
</form> 

SCRIPT

var $form = $('#calc'), 
    $summands = $form.find('.income'), 
    $sumDisplay = $('#grand-total'); 

    $form.delegate('.income', 'change', function(){ 
     var sum = 0; 
     $summands.each(function() { 
      var value = Number($(this).val()); 
      if (!isNaN(value)) sum += value; 
    }); 

    $sumDisplay.val(sum); 
}); 

$("#grand-total-filter").change(function() { 
     var e = document.getElementById("grand-total-filter"); 
     var strUser = e.options[e.selectedIndex].value; 
     if (strUser == 'monthly') { 
      // Monthly 
     } else if (strUser == 'weekly') { 
      // Weekly 
     } else { 
      // Default (Daily) 
     } 
    }); 

下面是一個工作的jsfiddle上述位：http://jsfiddle.net/4Q8Gh/1/

的想法是，最終用戶應該能夠使用任何選項添加值（item1，item2和item3） （每日，每月，每週） - 單獨 - 因此item1/item2/item3可以有任何選項（每日，每週，每月）。

結果應該默認顯示在「每日」值中，結果輸入可以通過任何選項再次過濾：每日，每週，每月。

因此，例如，我們有：

1. 物品1 = 10（日）
2. ITEM2 = 100（每週）
3. 項目3 = 1000（每月）

這給了我們一個總計*：

• 每日：10 +（100/5）+（1000/20）= 80
• 每週：（10 * 5）+ 100 +（4分之1000）= 400
• 每月：（10 * 20）+（100 * 4）+ 1000 = 1600

*基於所述上面的例子，並考慮到1周= 5個工作日和1個月= 4周

在這一點上，我迷路了，我不知道如何將這些想法扔進使用jQuery的代碼，所以任何幫助/指導將非常感激。預先感謝任何反饋！

P.S.如果我的方法由於任何原因不正確，我會非常樂意聽到您的建議。

Answer 1

使1功能執行完整的計算，然後將您的窗體INPUT和SELECT更改事件委託給它。

http://jsfiddle.net/RZpnz/

function calculate() { 
    var sum = 0; 
    $("#calc").find("input.income").each(function() { 
     var val = parseFloat($(this).val()); 
     if(!isNaN(val)) { 
      var unit = $("#select-" + this.id).val(); 
      switch(unit) { 
       case "daily": sum += val; break; 
       case "weekly": sum += val/5; break; 
       case "monthly": sum += val/(5 * 4); break; 
       default: break; 
      } 
     } 
    }); 
    var unit = $("#grand-total-filter").val(); 
    switch(unit) { 
     case "daily": sum *= 1; break; 
     case "weekly": sum *= 5; break; 
     case "monthly": sum *= (5 * 4); break; 
     default: break; 
    } 
    $("#grand-total").val(sum); 
} 
$("#calc").delegate("input.income", "change", calculate); 
$("#calc").delegate("select.select", "change", calculate);