jQuery从变量中获取NaN和[object object]

jQuery getting back NaN and [object Object] from variables

本文关键字:object NaN 获取 变量 jQuery      更新时间:2023-09-30

我在让脚本工作时遇到了一些问题。我的脚本计算订单数量和每个订单的权重。当按下"新行"按钮时,我的表单实际上是由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);
        }
    }

提前感谢!

$('#totalitF'+number)这样的选择器都无法工作,因为您没有在ID中添加数字。代替:

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

应该是:

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

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

$(this).data('no')

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