Question

我正在尝试创建一个计算器，它接受输入字段（数量）的值，然后在公式中使用并输出到span元素（cubics）。这一切都有效。请看我的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);
});

我现在想添加总计表中的数量和立方体的计算，但我不确定如何从span元素计算这些。任何帮助赞赏。感谢。

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

检查此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/

Answer 2

当您正在使用多个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 3

下划线的reduce方法非常完美。 http://underscorejs.org/#reduce

创建多个span元素的总计算

3 个答案: