jQuery为什么计算结果总是NaN ,求大神帮助
0
悬赏园豆：30
[已解决问题]
解决于 2017-12-24 19:07
求大神解救，折磨一下午加一晚上了，嗯就是购物车的jquery动态的显示结算总价的功能，算出来一直是NaN，也不知道为什么
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <title>Cart</title> <meta charset="utf-8" /> </head> <body > <div class="cart"> <table id="cartForm"cellspacing="0"cellpadding="0"> <thead> <tr align="left"bgcolor="#eaecec"> <th align="left" width="80px">12345</th> <th class="product-subtotal">金额</th> </tr> </thead> <tbody> <div class="cart_item"> <tr align="left"> <td margin-left="10px"> <span id="sselect"><lablel for=""><input type="checkbox" class="goods-check select"></lablel> </span> </td> <td class="product-subtotal"> <span>¥<span class="zongPrice">300.00</span></span> </td> </tr> </div> <div class="cart_item"> <tr margin-left="10px"> <td align="left"> <span id="sselect"><lable for=""><input type="checkbox" class="goods-check select"></lable></span> </td> <td class="product-subtotal"> <span>¥<span class="zongPrice">300.00</span></span> </td> </tr> </div> </tbody> </table> </div> <div id="checkout" > <div class="delet"> <a class="idelet" hidefocus="true" href="#">删除</a> </div> <div class="total"> <label for=""><input type="checkbox" id="selectAll" class="goods-check selectall">全选</label> <span>总计：<span >¥ <span id="dtotal">0</span></span></span> </div> <div class="mcheckout"> <a class="imcheckout" href="#"><span>结算</span></a> </div> </div> <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript"> // 点击商品按钮 $(".select").click(function() { var goods = $(this).closest(".cart").find(".select"); //获取本店铺的所有商品 var goodsC = $(this).closest(".cart").find(".select:checked"); //获取本店铺所有被选中的商品 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 $("#selectAll").prop('checked', true); //全选按钮被选中 TotalPrice(); } else { $("#selectAll").prop('checked', false); //else全选按钮不被选中 TotalPrice(); } }); // 点击全选按钮 $("#selectAll").click(function() { if ($(this).prop("checked") == true) { //如果全选按钮被选中 $(".select").prop('checked', true); //所有按钮都被选中 TotalPrice(); } else { $(".select").prop('checked', false); //else所有按钮不全选 TotalPrice(); } }); function TotalPrice() { $(".cart").each(function() { var oprice = 0; $(this).find(".select").each(function() { //循环店铺里面的商品 if ($(this).is(":checked")) { //如果该商品被选中 var price = parseFloat($(this).parents(".cart_item").find(".zongPrice").text()); //得到商品的单价 var total = price; //计算单个商品的总价 oprice += total; //计算该店铺的总价 } $("#dtotal").text(oprice.toFixed(2)); //输出全部总价 }); }); } </script> </body> </html>
最佳答案
1
兄弟，看出来点什么了呢吗？ div.cart_item没有在parents的列表中。也就是说$(this).parents()根本就没有取到class="cart_item"的对象。我在谷歌浏览器下调试发现浏览器对这个代码的源程序进行了改变。把input对象放到了div之外。有点类似jvm的优化。。具体是什么原理，我也不知道了。有厉害的兄弟请跟贴。要解决这个问题，其实只要把cart_item放在tr中。类似以下
<tr margin-left="10px" class="cart_item">
其它一切不变，你再试一下。
我这边是解决了你的问题！！！！
我也研究了大半天你的问题，感觉有点点进步感。。呵呵
收获园豆：30
哇！！！可以了！谢谢你！！
其他回答(1)
0
哪个值为NAN？另外，建议代码加上高亮
就是最后这个
$("#dtotal").text(oprice.toFixed(2));
好的，我研究一下怎么高亮
就是选择了商品或者全选按钮，显示总价格都是NaN
@yayaq: price有值吗？
@dudu:
price应该是要得到这个值，但是我不知道哪里出错了
<span>¥<span class="zongPrice">300.00</span></span>
@yayaq: 应该是$(this)引起的
@dudu: 嗯...我好像还是不知道怎么改，这个$(this)是指的什么呢？
@dudu: 还是。。。不知道
@dudu: 我把$(this)都改了，可能改的不对吧...还是NaN
function TotalPrice() {
$(".cart").each(function() {
var oprice = 0;
$(".cart").find(".select").each(function() { //循环店铺里面的商品
if ($(".select").is(":checked")) { //如果该商品被选中
var price = parseFloat($(".select:checked").parents(".cart_item").find(".zongPrice").text()); //得到商品的单价
var total = price; //计算单个商品的总价
oprice += total; //计算该店铺的总价
}
$("#dtotal").text(oprice.toFixed(2)); //输出全部总价
});
});
}
