首页新闻找找看学习计划

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>&yen;<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>&yen;<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 >&yen;&nbsp;<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>
yayaq的主页 yayaq | 初学一级 | 园豆:172
提问于:2017-12-23 21:17
< >
分享
最佳答案
1

兄弟,看出来点什么了呢吗? div.cart_item没有在parents的列表中。也就是说$(this).parents()根本就没有取到class="cart_item"的对象。我在谷歌浏览器下调试发现浏览器对这个代码的源程序进行了改变。把input对象放到了div之外。有点类似jvm的优化。。具体是什么原理,我也不知道了。有厉害的兄弟请跟贴。要解决这个问题,其实只要把cart_item放在tr中。类似以下

<tr  margin-left="10px" class="cart_item">

其它一切不变,你再试一下。

我这边是解决了你的问题!!!!

我也研究了大半天你的问题,感觉有点点进步感。。呵呵

收获园豆:30
David5201 | 小虾三级 |园豆:534 | 2017-12-24 16:03

哇!!!可以了!谢谢你!!

yayaq | 园豆:172 (初学一级) | 2017-12-24 19:06
其他回答(1)
0

哪个值为NAN?另外,建议代码加上高亮

dudu | 园豆:39845 (高人七级) | 2017-12-23 22:28

就是最后这个

$("#dtotal").text(oprice.toFixed(2));

 

好的,我研究一下怎么高亮

支持(0) 反对(0) yayaq | 园豆:172 (初学一级) | 2017-12-23 22:31

就是选择了商品或者全选按钮,显示总价格都是NaN

支持(0) 反对(0) yayaq | 园豆:172 (初学一级) | 2017-12-23 22:38

@yayaq: price有值吗?

支持(0) 反对(0) dudu | 园豆:39845 (高人七级) | 2017-12-23 22:41

@dudu: 

price应该是要得到这个值,但是我不知道哪里出错了

<span>&yen;<span class="zongPrice">300.00</span></span>

支持(0) 反对(0) yayaq | 园豆:172 (初学一级) | 2017-12-23 22:44

@yayaq: 应该是$(this)引起的

支持(0) 反对(0) dudu | 园豆:39845 (高人七级) | 2017-12-23 22:49

@dudu: 嗯...我好像还是不知道怎么改,这个$(this)是指的什么呢?

支持(0) 反对(0) yayaq | 园豆:172 (初学一级) | 2017-12-23 22:55

@dudu: 还是。。。不知道

支持(0) 反对(0) yayaq | 园豆:172 (初学一级) | 2017-12-23 23:14

@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)); //输出全部总价
      }); 
    });
    
  }

 

 

支持(0) 反对(0) yayaq | 园豆:172 (初学一级) | 2017-12-23 23:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册