加入jQuery的循環變量和輸入字段存儲

Question

我一無所知的Javascript/jQuery的等，但使用谷歌和人的答案我使用下列到一個小計框中添加字段x個一起顯示。

下面的腳本循環所以每次你看到一個1，這將增加每個循環計數的時間。顯示每個計數的總數，編輯任何數字只會更新該部分的總數。

var $form = $('#locations'), 
    $summands1 = $form.find('.addme1'), 
    $sumDisplay1 = $('#incoming1'); 

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

    $sumDisplay1.val(sum); 

    $summandsa1 = $form.find('.addmea1'), 
    $sumDisplaya1 = $('#outgoing1'); 
}); 
$form.delegate('.addmea1', 'change', function() { 
    var sum = 0; 
    $summandsa1.each(function() { 
     var value = Number($(this).val()); 
     if (!isNaN(value)) sum += value; 
    }); 

    $sumDisplaya1.val(sum); 
}); 

這是一個示例形式

<form id="locations" method='post' action=''>Loop 1 
     <br> 
     <input type="text" value="75" name="" class="addme1"> 
     <input type="text" value="150" name="" class="addmea1"> 
     <br> 
     <input type="text" value="75" name="" class="addme1"> 
     <input type="text" value="150" name="" class="addmea1"> 
     <br> 
     <input type="text" value="75" name="" class="addme1"> 
     <input type="text" value="150" name="" class="addmea1"> 
     <br> 
     <input type="text" value="75" name="" class="addme1"> 
     <input type="text" value="150" name="" class="addmea1"> 
     <br> 
     <input type="text" value="300" name="" id="incoming1"> 
     <input type="text" value="600" name="" id="outgoing1"> 
     <br>Loop 2 
     <br> 
     <input type="text" value="75" name="" class="addme2"> 
     <input type="text" value="150" name="" class="addmea2"> 
     <br> 
     <input type="text" value="75" name="" class="addme2"> 
     <input type="text" value="150" name="" class="addmea2"> 
     <br> 
     <input type="text" value="75" name="" class="addme2"> 
     <input type="text" value="150" name="" class="addmea2"> 
     <br> 
     <input type="text" value="75" name="" class="addme2"> 
     <input type="text" value="150" name="" class="addmea2"> 
     <br> 
     <input type="text" value="300" name="" id="incoming2"> 
     <input type="text" value="600" name="" id="outgoing2"> 
     <br> 
     <br> 
     <br>Total : 
     <input type="text" value="600" name="" id="totalin"> 
     <input type="text" value="1200" name="" id="totalout"><br> 
Profit : 
     <input type="text" value="600" name="" id="profit"> 
    </form> 

我需要的是添加incoming1 incoming2加上任何其他incomingx值的方式有和在totalin與outgoing1,2etc然後將具有存儲，同樣地利用totalout-totalin更新利潤。所以如果一個值從他們當前設置的值改變，它會自動更新所有其他字段。

任何人都可以幫忙嗎？

這裏的小提琴：http://jsfiddle.net/Gt473/3/ 請注意，循環2不工作，因爲我不知道如何重複jsfiddle上的腳本，但它在html頁面上工作。

Answer 1

我不確定你的要求是什麼。但這是我的承諾，我發佈的答案不是你想要的。而且下面的代碼可以寫的更好，但這是給你的研究。

<form id="locations" method='post' action=''> 
     <fieldset class="level"> 
      <legend>Loop1</legend> 
      <label>Incoming</label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label>Outgoing</label> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="subIncoming" disabled> 
      <input type="text" value="" name="" class="subOutgoing" disabled> 
     </fieldset> 
     <fieldset class="level"> 
      <legend>Loop2</legend> 
      <label>Incoming</label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label>Outgoing</label> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="subIncoming" disabled> 
      <input type="text" value="" name="" class="subOutgoing" disabled> 
     </fieldset> 
     <fieldset class="level"> 
      <legend>Loop3</legend> 
      <label>Incoming</label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label>Outgoing</label> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="subIncoming" disabled> 
      <input type="text" value="" name="" class="subOutgoing" disabled> 
     </fieldset> 
     <fieldset class="level"> 
      <legend>Loop4</legend> 
      <label>Incoming</label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label>Outgoing</label> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="subIncoming" disabled> 
      <input type="text" value="" name="" class="subOutgoing" disabled> 
     </fieldset> 
     <fieldset class="level"> 
      <legend>Loop5</legend> 
      <label>Incoming</label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label>Outgoing</label> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="incoming"> 
      <input type="text" value="" name="" class="outgoing"> 
      <br> 
      <input type="text" value="" name="" class="subIncoming" disabled> 
      <input type="text" value="" name="" class="subOutgoing" disabled> 
     </fieldset> 
     <fieldset class="total"> 
      <legend>Total</legend> 
      <label>Incoming</label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <label>Outgoing</label> 
      <br> 
      <input type="text" value="" name="" id="totalIncoming" disabled> 
      <input type="text" value="" name="" id="totalOutgoing" disabled> 
     </fieldset> 
     <fieldset> 
      <legend>Profit</legend> 
      <input type="text" value="" name="" id="profit" disabled>    
     </fieldset> 
</form> 

var $form = $('#locations'), 
    $totalIncoming = $('#totalIncoming'), 
    $totalOutgoing = $('#totalOutgoing'), 
    $profit = $('#profit'); 

$form.on('input', '.level input', function() { 
    var textBoxClass = $(this).attr('class'), 
     $level = $(this).closest('.level'), 
     $subTextBox = null, 
     $totalTextBox = null, 
     $textBoxes = null, 
     $subTextBoxes = null, 
     subSum = 0, 
     totalSum = 0; 

    if(textBoxClass === 'incoming'){ 
     $textBoxes = $level.find('.incoming'); 
     $subTextBox = $level.find('.subIncoming'); 
     $totalTextBox = $('#totalIncoming'); 
     $subTextBoxes = $form.find('.subIncoming'); 
    }else{ 
     $textBoxes =$level.find('.outgoing'); 
     $subTextBox = $level.find('.subOutgoing'); 
     $totalTextBox = $('#totalOutgoing'); 
     $subTextBoxes = $form.find('.subOutgoing'); 
    } 

    $textBoxes.each(function() { 
     var value = Number($(this).val()); 
     if (!isNaN(value)) subSum += value; 
    }); 

    $subTextBox.val(subSum); 

    $subTextBoxes.each(function() { 
     var value = Number($(this).val()); 
     if (!isNaN(value)) totalSum += value; 
    }); 

    $totalTextBox.val(totalSum); 

    $profit.val($totalIncoming.val() - $totalOutgoing.val()) 
});