Создать общий расчет нескольких элементов span

Question

Я пытаюсь создать калькулятор, который принимает значение поля ввода (количества), которое затем используется в формуле и выводится в элемент span (кубики). Все это работает. Пожалуйста, см. Мой jsfiddle.

Пример кода

<input id="07flute" type="text" value="0" /> 
<span id="cubics"></span> 

$("#07flute").keyup(function() { 
    var val = parseFloat($(this).val()); 
    val = (val ? val/50 * 0.0113 : "Invalid number"); 
    $("#cubics").text(val); 
}); 

Теперь я хотел бы добавить вычисления, которые в сумме количество и Кубик в этой таблице, хотя я не уверен, как рассчитать их из пролетных элементов. Любая помощь оценивается. Благодарю.

обновленный http://jsfiddle.net/weedy/vcD9A/

Отредактированный ответ метод

function total() { 
var total = 0; 
$('span.cubics').each(function() { 
    var n = parseFloat($(this).text()); 
    total += isNaN(n) ? 0 : n; 
}); 
$('.totalcubics').text(total.toFixed(2)); 
} 

$('input.qty').keyup(function() { 
var val = parseFloat($(this).val()); 
val = (val ? val/50 * $(this).data('cubics') : ''); 
$(this).closest('td').next().find('span.cubics').text(val); 
total(); 
}); 

var $form = $('#my-form'), 
$summands = $form.find('input'), 
$sumDisplay = $('span#totalquantity'); 

$form.keyup(function() 
{ 
var sum = 0; 
$summands.each(function() 
{ 
    var value = Number($(this).val()); 
    if (!isNaN(value)) sum += value; 
}); 

$sumDisplay.text(sum); 
}); 

http://jsfiddle.net/weedy/zn9kv/

Answer 1

Как вы выжидать множественные keyup обработчики я предлагаю использовать вспомогательную функцию:

function total() { 
    $('.totalcubics').html(function() { 
     var total = 0; 
     $('table').find('span').not(this).each(function() { 
      var n = parseFloat($(this).text()); 
      total += isNaN(n) ? 0 : n; 
     }); 
     return total; 
    }) 
} 

http://jsfiddle.net/nJW7u/

Answer 2

Underscore в reduce был бы идеальным. http://underscorejs.org/#reduce

Answer 3

Проверить эту функцию doSum:

function doSum(){ 
    var one = parseFloat($("#cubics").text(),10); 
    if(isNaN(one)) one = 0; 
    var two = parseFloat($("#cubics2").text(),10); 
    if(isNaN(two)) two = 0; 
    var three = parseFloat($("#cubics3").text(),10);  
    if(isNaN(three)) three = 0;  
    $('.totalcubics').text(one+two+three); 
} 
$("#07flute").keyup(function() { 
    var val = parseFloat($(this).val()); 
    val = (val ? val/50 * 0.0113 : "Invalid number"); 
    $("table #cubics").text(val); 
    doSum(); 
}); 

$("#08flute").keyup(function() { 
    var val = parseFloat($(this).val()); 
    val = (val ? val/50 * 0.0128 : "Invalid number"); 
    $("#cubics2").text(val); 
    doSum(); 
}); 

$("#09flute").keyup(function() { 
    var val = parseFloat($(this).val()); 
    val = (val ? val/50 * 0.0128 : "Invalid number"); 
    $("#cubics3").text(val); 
    doSum(); 
}); 

Работа скрипку: http://jsfiddle.net/basarat/UHfR8/