jquery - 複数のスパン要素の合計計算を作成

Question

入力フィールド (数量) の値を取得して数式で使用し、スパン要素 (キュービック) に出力する計算機を作成しようとしています。これはすべて機能しています。私の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);
});

そのテーブル内の Quantity と Cubics を合計する計算を追加したいと思いますが、スパン要素からこれらを計算する方法がわかりません。どんな助けでも感謝します。ありがとう。

更新された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

この 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 3

アンダースコアのreduce方法は完璧です。http://underscorejs.org/#reduce