jQuery 从变量中取回 NaN 和 [object Object]
jQuery getting back NaN and [object Object] from variables
我在运行脚本时遇到了一些问题。我的脚本计算订单数量和每个订单的重量。当按下 "New Line" 按钮时,我的表单实际上是由 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);
}
}
提前致谢!
None 的选择器(例如 $('#totalitF'+number)
)将起作用,因为您没有将数字附加到您的 ID。而不是:
id="totalitF" no="'+ lineNum +'"/>'
应该是:
id="totalitF'+ lineNum +'" data-no="'+ lineNum +'"/>'
您不应该创建自己的属性。如果要向元素添加其他属性,请使用 data-
属性。然后在 jQuery 中你可以访问它作为
$(this).data('no')
获取值。在其他函数中使用它代替 $(this).attr('no')
.
我在运行脚本时遇到了一些问题。我的脚本计算订单数量和每个订单的重量。当按下 "New Line" 按钮时,我的表单实际上是由 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);
}
}
提前致谢!
None 的选择器(例如 $('#totalitF'+number)
)将起作用,因为您没有将数字附加到您的 ID。而不是:
id="totalitF" no="'+ lineNum +'"/>'
应该是:
id="totalitF'+ lineNum +'" data-no="'+ lineNum +'"/>'
您不应该创建自己的属性。如果要向元素添加其他属性,请使用 data-
属性。然后在 jQuery 中你可以访问它作为
$(this).data('no')
获取值。在其他函数中使用它代替 $(this).attr('no')
.