jQuery update line total on blur

Question

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

Какой был бы лучший способ сделать это с помощью jQuery? Является ли изменение или keyup лучшим решением?

Answer 1

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

Что-то вроде этого:

$(function() { 
    $("#Class1Tuition #Class1Book").blur(function(){ 
    $("#Class1Total").val(parseInt($("#Class1Tuition").val()) + parseInt($("#Class1Book").val())); 
    CalculateGrandTotal(); //It will calculate the grand total and fill into textboxt. You should create this function 
    }); 
}); 

Answer 2

Это то, что вы могли бы действительно сделать с JQuery связыванием keyevents для обновления расчетных значений нужно. Другим вариантом, однако, было бы использование структуры, которая значительно упрощает привязку данных. Лично мне нравится инфраструктура AngularJS, но есть и другие, которые, вероятно, больше подходят для ваших нужд.

Answer 3

Возможно, onkeyup не будет рекомендовать, но всегда это зависит от клиентских запросов и поведения, которое вы хотите.

OnChange и onblur имеют схожее поведение, по крайней мере, на хроме, но при использовании клавиш или клавиатуры у вас есть расчет в реальном времени, поэтому то, что вы используете, зависит от того, что вы хотите.

Проверить это fidle http://jsfiddle.net/ghtep/

$(function(){ 
     $("#group1 .test").change(function(){ 
      var result = 0; 
      $("#group1 .test").each(function(){ result += Number($(this).val()); }) 
      $("#group1 .result").val(result); 
     }); 

    $("#group2 .test").blur(function(){ 
     var result = 0; 
     $("#group2 .test").each(function(){ result += Number($(this).val()); }) 
     $("#group2 .result").val(result); 
    }); 

    $("#group3 .test").keyup(function(){ 
     var result = 0; 
     $("#group3 .test").each(function(){ result += Number($(this).val()); }) 
     $("#group3 .result").val(result); 
    }); 
}); 

Answer 4

Такая ситуация является именно то, что .on() был разработан. Читайте на этой странице для получения более подробной информации, но в основном вы можете присоединить одного прослушивателя событий к родительскому элементу всех ящиков, которые будут прослушивать события из всех из них, вместо того, чтобы прикреплять кучу слушателей к каждой коробке. Без реального кода, я просто делать предположение о структуре коды, но вот пример:

$('#ClassDetails').on('blur','input.books input.fees',function(evt) { 
    $currow = $(this).closest('tr'); 
    $currow.find('.total').val(parseInt($currow.find('.fees').val()) + parseInt($currow.find('.books').val())) 
    CalculateGrandTotal(); 
}); 

Это будет намного эффективнее, быстрее и менее обременительным, чем прикрепление слушателя событий для каждого элемента, и намного лучше работать с imo.

В качестве бонуса, если вы хотите, чтобы прослушать несколько событий (размытие и KeyUp, скажем), вы можете сделать это, просто задав несколько разделенных пробелами события, например, так:

$('#ClassDetails').on('blur keyup','input.books input.fees',function(evt) { 

Если вы» повторите это, попробуйте проверить код ключа (evt.which) и только обработать на этом. Вероятно, вы захотите выполнить некоторую проверку, если не хотите суммировать частичные числа (добавив 1 до 15 до 150 к общей сумме).

Еще одна вещь, которую вы могли бы подумать о добавлении, в зависимости от того, сколько полей вы работаете и насколько быстрыми вещами являются as-is, вместо того, чтобы получать значения каждого элемента, которые вам нужны каждое обновление, просто отразите значения в JSON, обновите значение, которое изменилось в этом объекте, а затем запустите итоговые значения. Это было бы более сложным, но также немного быстрее, чем прямой доступ к значениям.

Вот a fiddle Я собрал для другого человека с похожим вопросом. Он использует слайдеры вместо текстовых полей для ввода, но основы одинаковы.