2

我需要一些关于 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 中的工作演示

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

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

4

4 回答 4

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);
于 2013-03-30T23:06:28.553 回答
0

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

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

最后，您可能会注意到，如果您的输入在表单内，则表单的 DOM 元素直接将其命名输入引用为实时属性：假设名为 myForm 的表单具有名为 myInput 的输入，那么您的输入可以通过 document.getElementById(" myForm").myInput 这比使用 jQuery 获取它要快得多。

于 2013-03-30T23:30:41.493 回答
0

代替

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

尝试

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

我认为现在的问题是 Jquery 试图将一个字符串与一个整数相乘，这就是你得到 0.0.0 的原因。

于 2013-03-30T23:06:07.567 回答
0

这可以非常简洁地完成，不需要 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));
});

演示

当然，如果您需要它们用于其他目的，您可以保留这些 id。

于 2013-03-31T00:12:36.177 回答