javascript - 如何使用 JQuery 更新卡路里计算器的总卡路里？

Question

我想知道如何在表格中添加所有“subTotal”并在“total-cal”中显示总数？

我尝试使用解析并在计算总量时应用相同的方法并且它有效，但它不适用于总卡路里的一部分（显示 NaN 而不是 nums）......

先感谢您..！

这是我的 HTML+JQuery 代码：

            <div class="bd-item">
                <img src="bread-demp1.jpg" style="width: 200px; height: 200px" 
                    class="mx-auto d-block"></label>
                <h5 class="desc">Dempster Wheat - Thin</h5>
                <h6 class="calorie">70</h6>
                <a href="javascript:void(0)" class="get" data-pid="p001">Get</a>
            </div>
        </div>
        
        <table style="width:70%" >
            <tr>
              <td></td>
            </tr>

            <template id="temp1">
                <tr data-pid="{{pid}}">
                    <td>
                        <span class="pname">{{pname}}</span>
                    </td>
                    <td class="calorie">{{calorie}}</td>
                    <td>  
                        <input type="text" class="qtty" value="1"/>
                    </td>
                    <td class="subTotal">{{calorie}}</td>
                  </tr>
            </template>
        </table>

        <div class="food-total">
            <p>Total: <span class="total">0</span>
                Total calories: 
                <span class="total-cal">0</span>
            </p>
        </div>
            
        <script type="text/javascript">
            var datas = {
                p001: {
                    pname:'Dempster Wheat - Thin',
                    calorie:70,
                    src:'bread-demp1.jpg'
                }           
            }

            **function calcTotal() {
                var sum, count = 0;
                var count = 0;  
                $('.qtty').each(function(i,ele){
                    count += parseInt($(ele).val());
                });
                $('.total').html(count);
                $('.subTotal').each(function(i,ele){
                    sum += parseFloat($(ele).text());
                });
                $('.total-cal').html(sum.toFixed(1));
            }**
      

标签： javascripthtmljquerycssshopping-cart