使用JQUERY如何顯示特定活動的支出金額

我有4個輸入文本框和4個下拉菜單。在文本字段中，用戶將輸入他們花費的金額。並使用下拉菜單，用戶將選擇他們花在哪裏，它可以用於娛樂，交通，食物或其他。使用JQUERY如何顯示特定活動的支出金額

我可以計算總費用，但我不知道如何獲得一個特定區域的資金支出。我可以顯示，例如，「120USD」，但我怎麼能顯示「120USD是花錢娛樂，300換食品」等

這是文本框和下拉菜單，然後只是重複了四次：

<input type="button" id="calculate" value="Calculate"/> 
    <label>Php</label><input type="text" id="sum"/> 
    <div id="main"> 
     <label>Php</label><input type="text" class="expenses"/> 
     <select> 
      <option class="transpo" selected>Transportation</option> 
      <option class="ent">Entertainment</option> 
      <option class="food">Food</option> 
      <option class="others">Others</option> 
     </select> 
    </div>

我的公式來計算總的是這樣的：

$("#calculate").click(function(){ 
       $(".expenses").each(function(){ 
        sum+=parseFloat(this.value); 
       }); 
       $("#sum").val(sum); 
    });

我做了一些改變，並實現下面的解決方案。除了我如何獲得百分比？我發現下面的代碼計算了每次迭代的百分比。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="jquery-1.11.0.min.js"></script> 
    <script type = "text/javascript"> 
     $(document).ready(function(){ 

      $("#addnew").click(function(){ 
       $("#main").append('<div id="main"><label>Php</label><input type="text" class="expenses"/><select><option value="Transportation"selected>Transportation</option><option value="Entertainment">Entertainment</option><option value="Food">Food</option><option value="Others">Others</option></select></div>'); 
      }); 
      $("#calculate").click(function(e) { 
       e.preventDefault(); 

       var sum = new Array(); 
       var expenses = ''; 

       $(".expenses").each(function() { 
        var expense = $(this); 
        var option = expense.next('select').val(); 

        if (typeof(sum[option]) == 'undefined') { 
        sum[option] = 0; 
        } 
        sum[option] += parseFloat(expense.val()); 
       }); 

       var total = 0; 
       for(var index in sum) { 

        total += sum[index]; 
        expenses += index + " : " + (sum[index]/total*100) + "%" +" || "; 
       } 
       $("#main").append('<p id="percentage"></p>'); 
       $("#percentage").text(expenses + " Total: " + total); 

      }) 
     }); 
    </script> 
</head> 
<body> 
    <input type="button" id="calculate" value="Calculate"/> 

    <div id="main"> 
     <label>Php</label><input type="text" class="expenses"/> 
     <select> 
      <option class="Transportation" selected>Transportation</option> 
      <option class="Entertainment">Entertainment</option> 
      <option class="Food">Food</option> 
      <option class="Others">Others</option> 
     </select> 
    </div> 
    <input type="button" id="addnew" name="add" value="add"/> 
</body> 
</html>

來源

2014-04-03 user3266210

我會使用jQuery的大意如下：

$('#calculate').click(function(e) { 
    e.preventDefault(); 

    var sum = new Array(), 
     expenses = ''; 

    $('.expenses').each(function() { 
     var expense = $(this), 
      option = expense.next('select').val(); 

     if (typeof(sum[option]) == 'undefined') { 
      sum[option] = 0; 
     } 
     sum[option] += parseFloat(expense.val()); 
    }); 

    var total = 0; 
    for(var index in sum) { 
     expenses += index + " : " + sum[index] + "<br />"; 
     total += sum[index]; 
    } 

    $('#sum').html(expenses + "<br /><strong>Total:</strong> " + total + "<br /><br />"); 
})

Example

來源

2014-04-03 13:41:38 Pete

聲明4個瓦爾：對所有值下拉

var transpo = 0, ent = 0, food = 0, others = 0;

環，獲得所選擇的選項每一個都有：

$("#myselect option:selected").text();

測試選項名稱是否與「Transpo」，「Ent」，...匹配，並增加與費用對應的var。

最後返回每個var與類別的總數。

來源

2014-04-03 13:41:50

使用JQUERY如何顯示特定活動的支出金額

回答

相關問題