Question

我试图从表单上的一堆输入文本字段中获取值，然后检查它们是否加起来为100.我使用下面的jQuery来执行此操作，但我只是得到“NaN”返回 - 有谁知道这是为什么？毫无疑问，我错过了一些愚蠢的东西（！）

var formPercentageTotal = 0;
var currentVal = 0;
setInterval(function(){
    $('.percentage-validate input.three-digit').each(function(){
        currentVal = $(this).val();
        currentVal = parseInt(currentVal);
        formPercentageTotal = formPercentageTotal + currentVal;
    });
    $('.percentage-validate .percentage-current').text(currentVal);
}, 500);

JSFiddle

Answer 1

在加起来之前尝试检查NaN。您可能已在任何输入字段中输入了alpahabet。 Fiddle

修改：您应该将formPercentageTotal设置为.formPercentageTotal。

var formPercentageTotal = 0;
var currentVal = 0;
setInterval(function(){
    $('.percentage-validate input.three-digit').each(function(){
        currentVal = $(this).val();
        currentVal = parseInt(currentVal);
        if (!isNaN(currentVal)) {
           formPercentageTotal = formPercentageTotal + currentVal;
        }
    });
    $('.percentage-validate .percentage-current').text(formPercentageTotal);
}, 500);

Answer 2

这个问题已经得到了解答，但是有一些关于你的代码的东西会使它效率低下且容易出错。考虑一下这段代码：

$.fn.boundForm = function(options) {

    var defaults = {
        fields: ".three-digit",
        total: ".percentage-current",
        validateInput: function(item) {
            item.value = parseInt(item.value.replace(/[^0-9]+/g, "")) || 0;
            return parseInt(item.value);
        },
        calculateTotal: function(fields) {            
            return fields.toArray().reduce(function(sum, item) {
                return sum + this.validateInput(item);
            }.bind(this), 0);
        },
        refresh: function(form) {
            form.find(this.total).text(this.calculateTotal(form.find(this.fields)));
        }
    }


    var o = $.extend({}, defaults, options);

    this.each(function() {
        var $form = $(this);    
        $form.on("input", o.fields, function() {
           o.refresh($form);
        });

        o.refresh($form);
    });
};

$(".percentage-validate").boundForm();

这是一个基本的小部件，与您的代码完全相同，但是：

它包含验证方法validateInput，它替换任何非数字，如果值为空则返回0;
每个时间间隔都不需要“脏检查”来确定值是否已更改，因此效率更高;
它是可重用的 - 如果你需要在其他地方计算其他一些值 - 你可以通过传递一个包含不同选择器，方法等的对象来轻松实现，它仍然可以正常工作，你需要只需致电$("#myContainer").boundForm(myOptions);

总而言之，这样可以使用更方便的代码。希望有所帮助。

P上。 S. Here's fiddle

添加多个输入的值

2 个答案: