Question

我需要一些jQuery脚本的帮助。所以这就是：

HTML：

    1<input type="text" name="plastvaike_v" id="plastvaike_v" /><br />
2<input type="text" name="plastsuur_v" id="plastsuur_v" /><br />
3<input type="text" name="klaas_v" id="klaas_v" /><br />
4<input type="text" name="plekk_v" id="plekk_v" /><br /><br />
<span id="plastvaike_t">0.00</span> + <span id="plastsuur_t">0.00</span> + <span id="klaas_t">0.00</span> + <span id="plekk_t">0.00</span> = <span id="total">0.00</span>

JS：

$('#plastvaike_v').keyup(function(ev){
    var plastvaike_t = $('#plastvaike_v').val() * 0.04;
    $('#plastvaike_t').html((plastvaike_t).toFixed(2));
});
$('#plastsuur_v').keyup(function(ev){
    var plastsuur_t = $('#plastsuur_v').val() * 0.08;
    $('#plastsuur_t').html((plastsuur_t).toFixed(2));
})
$('#klaas_v').keyup(function(ev){
    var klaas_t = $('#klaas_v').val() * 0.08;
    $('#klaas_t').html((klaas_t).toFixed(2));
})
$('#plekk_v').keyup(function(ev){
    var plekk_t = $('#plekk_v').val() * 0.08;
    $('#plekk_t').html((plekk_t).toFixed(2));
});

在JsFiddle的工作演示中，您可以找到here

现在我需要的是，我需要在“=”之后显示总值。这必须在jQuery中完成。

如果有人能在我在文本框中写任何数字后告诉如何使数字出现，那就太好了。现在有0.00。即使我删除它们，“+”仍将存在。希望你明白我想说的话......我的主要语言不是英语。

Answer 1

这是一个好的开始（http://jsfiddle.net/yyhNY/7/）：

function updateView() {
    var plastvaike_t = $('#plastvaike_v').val() * 0.04,
        plastsuur_t = $('#plastsuur_v').val() * 0.08,
        klaas_t = $('#klaas_v').val() * 0.08,
        plekk_t = $('#plekk_v').val() * 0.08;

    // Take all the numbers as an array, and get rid of the ones that are 0.
    var operands = [plastvaike_t, plastsuur_t, klaas_t, plekk_t];
    for (var i = 0; i < operands.length; i++) {
        if (operands[i] == 0)
            operands.splice(i--, 1);
    }

    // join puts them all together with a + separating them
    $('#operands').text(operands.join(' + '));

    // This sum method is something you'll either have to add to the array
    // prototype or write yourself—it's not part of javascript.
    var total = operands.sum();
    $('#total').text(total.toFixed(2));

    if (total == 0) $('#total').hide();
    else $('#total').show();
}

$('#plastvaike_v, #plastsuur_v, #klaas_v, #plekk_v').keyup(updateView);

Answer 2

而不是

$('#plastvaike_v').val() * 0.04;

试

parseInt($('#plastvaike_v').val(), 10) * 0.04;

我认为现在的问题是Jquery尝试将字符串与Integer相乘，这就是为什么你得到0.0。

Answer 3

为了在输入的空值上轻松处理“+”运算符删除，您可以简单地将等式的左侧部分视为唯一的跨度而不是四个，并将其文本动态设置为填充的数组，而不是空的仅使用数字值，并使用唯一参数“+”调用方法“join”。

此外，您可能不会忘记通过使用闭包变量来引用您的输入和跨度来优化一点。

最后，您可能会注意到，如果您的输入位于表单内，则表单的DOM元素直接将其命名输入作为实时属性：假设名为myForm的表单具有名为myInput的输入，则您的输入可通过文档访问。 getElementById（“myForm”）。myInput比使用jQuery快得多。

Answer 4

这可以非常简洁地完成，无需使用ID，如下所示：

HTML：

<div id="foo">
    1<input type="text" name="plastvaike_v" data-factor="0.04" /><br />
    2<input type="text" name="plastsuur_v" data-factor="0.08" /><br />
    3<input type="text" name="klaas_v" data-factor="0.08" /><br />
    4<input type="text" name="plekk_v" data-factor="0.08" /><br /><br />
<span>0.00</span> + <span>0.00</span> + <span>0.00</span> + <span>0.00</span> = <span>0.00</span>
</div>

#foo只是选择输入和跨度的一种方法。您可以通过其他方式选择它们，例如按类别 - 只要它们可以作为组选择。

JavaScript：

var $spans = $("#foo span");
var $inputs = $("#foo input").on('keyup', function() {
    var total = 0;
    $inputs.each(function(i, input) {
        var val = (Number(input.value) * Number($(input).data('factor'))) || 0;
        $spans.eq(i).text(val.toFixed(2));
        total += val;
    });
    $spans.filter(":last")text(total.toFixed(2));
});

<强> DEMO

当然，如果您出于其他目的需要，可以保留ID。

jQuery计算总数

4 个答案: