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); 
    } 
);