jQuery каждый цикл дважды

Question

У меня возникли проблемы с немного jQuery.

У меня есть список текстовых полей для ввода числовых значений в и окончательное текстовое поле, которое будет содержать общую сумму других текстовых полей.

Я не знаю, что я делаю неправильно, но каждый раз, когда вы вводите число в любое из текстовых полей, общее значение равно x2 от фактического значения. Я попытался пройти через javascript, чтобы увидеть, что происходит, и похоже, что .each дважды зацикливается.

Я потратил большую часть 2-х дней на поиск этой проблемы, и я не смог найти решение моей проблемы.

Вот ссылка на мой код 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 для текстового поля, другой для ввода тип номера

Проверка линии 3 и 4 ниже

<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> 

Так что использование $('[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>

вы использовали цикл Еогеасп в фокусе событий вне вот проблема. код без ошибок консоли

Answer 6

После того, как это фиксированный, вот две вещи, чтобы улучшить производительность:

• Преобразовать коллекцию JQuery входных элементов для правильного массива затем сделать нарастающим итогом с методом массива .reduce(). Никаких назначений не требуется.
• В обратном вызове reduce используйте +el.value, чтобы получить значение и преобразовать его из строки в число. Нет необходимости в $(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); 
    } 
);