jQuery每個循環兩次

Question

我遇到了一些jQuery的麻煩。

我有一個用於輸入數值的文本框列表以及包含其他文本框總和的最終文本框。

我不知道我在做什麼錯，但是每次在任何一個文本框中輸入一個數字時，總的值就是實際值的x2。我已經嘗試通過javascript來看看發生了什麼，它看起來像.each循環兩次。

我花了2天的時間用Google搜索這個問題的最好的部分，我一直沒能找到解決我的問題。

這裏是我的代碼JSFiddle

這裏的鏈接是我的javascript

$('.your-income').focusout(function() { 
    var tempTotal; 

    tempTotal = 0; 

    $('.your-income').each(function() { 
     tempTotal += Number($(this).val()); 

     $('#total-income-textbox').val(tempTotal); 
    }); 
}); 

謝謝您的時間。

Answer 1

你必須在每個div組兩個輸入。 type=number和type=text這就是爲什麼需要兩次計算每個值。你需要採取其中之一，所以我從他們採取type=number和您的問題解決。

$('.your-income').focusout(function() { 
    tempTotal = 0;  
     $('.your-income[type=number]').each(function (index) { 
      tempTotal += Number($(this).val());  
     }); 
      $('#total-income-textbox').val(tempTotal); 
    }); 

Demo

Answer 2

在每組中有兩個輸入。即型號和型號文字。你應該只使用其中任何一個的值。可以使用:visible選擇只指定文本框作爲輸入類型數量的元件已CSS設置爲顯示無：

$('input.your-income:visible').each(function() { 
     tempTotal += Number($(this).val()); 
     $('#total-income-textbox').val(tempTotal); 
    }); 

Working Demo

Answer 3

在每DIV你有2類，1爲文本框，另一個用於輸入型數目

下面

<div class="input-group"> 
    <span class="input-group-addon">£</span> 
    <input type="number" value="0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control input-sm your-income" name="your-income" style="-webkit-appearance: none; display: none;"> 
    <input class="ws-number ws-inputreplace form-control input-sm your-income wsshadow-1423481433791" type="text" placeholder="" value="0" aria-required="false" inputmode="numeric" aria-labelledby="" style="margin-left: 0px; margin-right: 0px; width: 426.2px;"> 
    <span class="input-buttons number-input-buttons input-button-size-1 wsshadow-1423481433791"><span unselectable="on" class="step-controls"> 
    <span class="step-up step-control"></span><span class="step-down step-control"></span></span></span> 
</div> 

檢查線3和4因此，使用$('[name="your-income"]').each(function() {

Working Fiddle

Answer 4

試試這個：

$('input.your-income').on('focusout', function() { 
     var tempTotal = 0; 
     $('input.your-income:visible').each(function() { 
      tempTotal += parseFloat(this.value, 10); 
     }); 
     $('#total-income-textbox').val(tempTotal); 
    }); 

Answer 5

$(document).ready(function() { 
 
    webshims.setOptions('forms-ext', { 
 
     replaceUI: 'auto', 
 
     types: 'number' 
 
    }); 
 
    webshims.polyfill('forms forms-ext'); 
 
}); 
 
var tempTotal=0; 
 
$('.your-income').focusout(function (e) { 
 
     tempTotal += Number($(this).val()); 
 
     $('#total-income-textbox').val(tempTotal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<form> 
 
    <div class="hide-inputbtns"> 
 
     <!-- /Household Details --> 
 
     <div class="container"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-body"> 
 
        <!-- /Content --> 
 
        <!-- /Your income --> 
 
        <h2 class="sub-header">Input Value</h2> 
 

 
        <table class="table table-striped table-bordered"> 
 
         <tr class="info"> 
 
          <th class="col-md-2">&nbsp;</th> 
 
         </tr> 
 
         <tr> 
 
          <td class="col-md-2"> 
 
           <div class='input-group'><span class='input-group-addon'>£</span> 
 
            <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-income' name='your-income' value='0.00' /> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="col-md-2"> 
 
           <div class='input-group'><span class='input-group-addon'>£</span> 
 
            <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-income' name='your-income' value='0.00' /> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="col-md-2"> 
 
           <div class='input-group'><span class='input-group-addon'>£</span> 
 
            <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-income' name='your-income' value='0.00' /> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="col-md-2"> 
 
           <div class='input-group'><span class='input-group-addon'>£</span> 
 
            <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-income' name='your-income' value='0.00' /> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="col-md-2"> 
 
           <div class='input-group'><span class='input-group-addon'>£</span> 
 
            <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-income' name='your-income' value='0.00' /> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
               <tr class="info"> 
 
          <td class="col-md-2"> 
 
           <div id="total-income"> 
 
            <div class='input-group'><span class='input-group-addon'>£</span> 
 
             <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm' name='total-income' id="total-income-textbox" value='0.00' readonly /> 
 
            </div> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
        </table> 
 
        <!-- Your income/ --> 
 
        <!-- Content/--> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- Household Details/ --> 
 
    </div> 
 
</form>

您使用對焦的foreach循環出事件多數民衆贊成的問題。沒有

Answer 6

一旦它固定在任何控制檯錯誤代碼，這裏有兩件事情來提高性能：

• 轉換輸入元素的jQuery的集合到一個適當的數組然後做一個運行總計使用Array方法.reduce()。沒有assignemtns需要。
• 在reduce的回調函數中，使用+el.value來獲取該值並將其從String轉換爲Number。循環中不需要$(this)。

下面的代碼的基礎上，@ Sadikhasan的回答是：

$('.your-income').focusout(function() { 
    $("#total-income-textbox").val($('.your-income[type=number]').get().reduce(function(sum, el) { 
     return sum + +el.value;  
    }, 0)); 
}); 

DEMO

Answer 7

試試這個： -

$('input.your-income').on('focusout', function() 
    { 
     var tempTotal = 0; 
     $('input.your-income:visible').each(function() 
     { 
      tempTotal += parseFloat(this.value, 10); 
     }); 
     $('#total-income-textbox').val(tempTotal); 
    } 
);