Question

我是新来的，JQuery的新手，我被卡住了

HTML：

<div class='col-md-2'>$pro_name</div>
<div class='col-md-2'><input type='text' class='form-control qty' pid='$pro_id' id='$qty-$pro_id' value='$qty' ></div>
<div class='col-md-2'><input type='text' class='form-control price' pid='$pro_id' id='$price-$pro_id' value='$pro_price' disabled></div>
<div class='col-md-2'><input type='text' class='form-control total' pid='$pro_id' id='$total-$pro_id' value='$total' disabled></div>

JQUERY：

$("body").delegate(".qty","keyup", function(){   
    var pid = $(this).attr("pid");          
    var qty = $("#qty-"+pid).val();
    var price = $("#price-"+pid).val();
    var total = qty * price;        
    alert(total);
})

Jquery警报返回NaN。

Answer 1

您最初遇到的一个问题是您的选择器语法。如果你想在jQuery的选择器中使用特殊字符，也就是'$'，你必须使用双斜杠'\\'来转义它们，就像我在下面的例子中所做的那样。

您目前的价值显然不是数字，但即使它们是，您仍会收到'NAN'。您必须对值参数使用parseInt（），因为值本身被视为字符串，而不是数字。

parseInt（）接受两个参数。第一个是您想要转换为整数的值，第二个是基数。在我的例子中，我使用了一个'10'的基数，它将值转换为一个简单的十进制数。

如果您想了解有关parseInt的更多信息，请点击此链接：http://www.w3schools.com/jsref/jsref_parseInt.asp

我继续将你的两个输入变量的默认值设置为实际数字，这样你就可以自己测试。

$(document).ready(function() {
  $("body").delegate(".qty","keyup", function(){   
    var pid = $(this).attr("pid");          
    var qty = parseInt($("#\\$qty-"+'\\'+pid).val(), 10);    
    var price = parseInt($("#\\$price-"+'\\'+pid).val(), 10);   
    var total = qty * price;        
    alert(total);    
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  
<div class='col-md-2'>$pro_name</div>
  
<div class='col-md-2'><input type='text' class='form-control qty' pid='$pro_id' id='$qty-$pro_id' value='2'></div>
  
<div class='col-md-2'><input type='text' class='form-control price' pid='$pro_id' id='$price-$pro_id' value='5' disabled></div>
  
<div class='col-md-2'><input type='text' class='form-control total' pid='$pro_id' id='$total-$pro_id' value='$total' disabled></div>
  
</body>

Answer 2

您的total值不是数字，它是一个字符串，您尝试多个两个字符串，以便获得nan。将您的值更改为某些数字数据然后尝试。

Answer 3

使用以下代码。您的代码中没有错误。

不需要在html字段中使用'$'。
您已取消价格字段，您需要输入该值。

有关使用html Id属性的更多信息，请查看此SO link

<div class='col-md-2'>
    <input type='text' class='form-control qty' pid='pro_id' id='qty_pro_id'  ></div>
    <div class='col-md-2'><input type='text' class='form-control price' pid='pro_id' id='price_pro_id' ></div>
    <div class='col-md-2'><input type='text' class='form-control total' pid='pro_id' id='total_pro_id' disabled>
</div>

$("body").delegate(".qty,.price","keyup", function(){   

  var pid = $(this).attr("pid");              
  var qty = $("#qty_"+pid).val();
  var price = $("#price_"+pid).val();
  var total = qty * price;        
  alert(total);
})

JS Fiddle

jquery alert返回NaN

3 个答案: