jQuery 从变量中取回 NaN 和 [object Object]

Posted 2023-03-11

【中文标题】jQuery 从变量中取回 NaN 和 [object Object]

【英文标题】：jQuery getting back NaN and [object Object] from variables

【发布时间】：2015-04-12 10:41:05

【问题描述】：

我在让我的脚本正常工作时遇到了一些问题。我的脚本计算订单数量和每个订单的重量。当按下“换行”按钮时，我的表单实际上是由 javascript 创建的。我试图做到这一点，每当填写 3 个值（商品数量、盒子中的商品数量、每个订单的盒子数量）时，它都会自动为您提供订单总数。此外，当给定单个项目的重量时，它会为您提供订单的总重量。所有这些都发生在使用 jquery 的 keyup 上。我只需要 javaScript 部分的帮助。后来我用 AJAX 处理了我的表单，一切正常，但是当我尝试实现它时它就坏了。

每当我使用 alert() 来查看我的代码为 updateForm() 函数分配了哪些值时，我都会得到 alert($totalitems) -> [object Object] 和 alert($weightperpal) -> NaN。有人可以帮我解决这个问题吗？这是我的代码：

html：

<button id="addLine" type="submit" class="btn red">Add Line</button>

JavaScript：

$("#addLine").click(function(e)
    e.preventDefault();
    lineNum++;

    var cont = '<div class="control-group">'+
        '<label class="control-label">Total # of items</label>'+
        '<div class="controls">'+
        '<input type="text" placeholder="" class="m-wrap medium orderField" name="totalitems'+lineNum+'" id="totalitF" no="'+ lineNum +'"/>'+
        '<span class="help-inline" style="font-size:10px; font-style:italic;">Not mandatory</span>'+
        '</div>'+
        '</div>'+
        '<div class="control-group">'+
        '<label class="control-label">Items per box</label>'+
        '<div class="controls">'+
        '<input type="text" placeholder="0" class="m-wrap medium orderField" name="ipb'+lineNum+'" id="itemspbF" no="'+ lineNum +'"/>'+
        '<span class="help-inline" style="font-size:10px; font-style:italic;">#</span>'+
        '</div>'+
        '</div>'+
        '<div class="control-group">'+
        '<label class="control-label">Boxes per order</label>'+
        '<div class="controls">'+
        '<input type="text" placeholder="0" class="m-wrap medium orderField" name="bpp'+lineNum+'" id="boxesppF" no="'+ lineNum +'"/>'+
        '<span class="help-inline" style="font-size:10px; font-style:italic;">#</span>'+
        '</div>'+
        '</div>'+
        '<div class="control-group">'+
        '<label class="control-label">Weight per Item</label>'+
        '<div class="controls">'+
        '<input type="text" placeholder="0" class="m-wrap medium orderField" name="wpi'+lineNum+'" id="weightpiF" no="'+ lineNum +'"/>'+
        '<span class="help-inline" style="font-size:10px; font-style:italic;">#</span>'+
        '</div>'+
        '</div>'+
        '<div class="control-group">'+
        '<label class="control-label">Total number of Orders</label>'+
        '<div class="controls">'+
        '<input type="text" placeholder="" class="m-wrap medium orderField" name="pallets'+lineNum+'" id="palletsF" no="'+ lineNum +'"/>'+
        '<span class="help-inline" style="font-size:10px; font-style:italic;"># of pallets</span>'+
        '</div>'+
        '</div>'+
        '<div class="control-group">'+
        '<label class="control-label">Weight per order</label>'+
        '<div class="controls">'+
        '<input type="text" placeholder="" class="m-wrap medium orderField" name="wpp'+lineNum+'" id="weightppF" no="'+ lineNum +'"/>'+
        '<span class="help-inline" style="font-size:10px; font-style:italic;">Total number of boxes</span>'+
        '</div>'+
        '</div>'+
        '</div>';

    $(document).on('keyup','.weightpiF',function()
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);
    );
    $(document).on('keyup','.weightppF',function()
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);

    );
    $(document).on('keyup','.itemspbF',function()
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);
    );
    $(document).on('keyup','.boxesppF',function()
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);
    );

    function updateFormRoe(number)
        alert(number);
        var $totalitems = $('#totalitF'+number);
        alert($totalitems);
        var $itemspb = $('#itemspbF'+number).val();

        var $boxespp = $('#boxesppF'+number).val();

        var $weightperitem = $('#weightpiF'+number).val();

        var $itemsinpallet = $itemspb * $boxespp;

        var $totalpals = $totalitems / $itemsinpallet;

        var $weightperpal = ($itemsinpallet) * $weightperitem;
        alert($weightperpal);
        if($totalitems !== '' && $itemspb !== '' && $boxespp !== '')
            if($totalpals == Infinity)
                $('#palletsF'+number).val('0');
            else
                $('#palletsF'+number).val($totalpals);  
            

            $('#weightppF'+number).val($weightperpal);
        
    

提前致谢！

【问题讨论】：

记得将$(...).val() 包裹在parseFloat(...) 中，以便将值转换为数字。

也可以使用console.log() 而不是alert() 来查看对象中的内容

【参考方案1】：

$('#totalitF'+number) 这样的选择器都不起作用，因为您没有将数字附加到您的 ID。而不是：

id="totalitF" no="'+ lineNum +'"/>'

应该是：

id="totalitF'+ lineNum +'" data-no="'+ lineNum +'"/>'

您不应该创建自己的属性。如果要向元素添加其他属性，请使用 data- 属性。然后在 jQuery 中你可以访问它

$(this).data('no')

获取价值。在你的其他函数中使用它来代替$(this).attr('no')。

【讨论】：

所以我应该去掉输入中额外的'no'属性，只使用 id="totalitF'+ lineNum +'"/>' 动态生成？

其实我看到你在其他函数中使用了.attr('no')，所以你需要它们。请参阅我的更新答案。