使用 Jquery 计算小计答案

【问题标题】：Calculate Subtotal Using Jquery使用 Jquery 计算小计
【发布时间】：2012-11-04 16:43:57
【问题描述】：

我正在尝试获取用户附加到购物车的商品小计，但似乎无法正常工作。

基本上我有一个项目列表，上面有一个添加到购物车按钮，该按钮链接到一个 jquery 函数，该函数将一些 html 附加到购物车：

$('#object01').click(function(){
    if ($('#slideShoppingCart').is(":hidden")) {
    $('#slideShoppingCart').slideToggle(500);   
    $('#objectList').append('<div class="shoppingCartObject"><img src="img/leather-backpack-cart.jpg" width="75" height="75"><div class="cartObjectInfo"><h1 class="cartTitle">Gentleman&#39;s Satchel</h1><div class="closeCartObject">x</div><h2 class="cartDescription">Chestnut Leather</h2><h3 class="quantity">QTY. 1</h3><h3 class="cartPrice">£<span class="price">300</span></h3></div></div>')
    } else {
        $('#objectList').append('<div class="shoppingCartObject"><img src="img/leather-backpack-cart.jpg" width="75" height="75"><div class="cartObjectInfo"><h1 class="cartTitle">Gentleman&#39;s Satchel</h1><div class="closeCartObject">x</div><h2 class="cartDescription">Chestnut Leather</h2><h3 class="quantity">QTY. 1</h3><h3        class="cartPrice">£<span class="price">300</span></h3></div></div>')
    }
    });
    $('.closeCartObject').live('click', function() {
    $(this).parent().parent().remove();

    return false;
});

我将价格包含在一个名为 price 的类中。然后我的购物车中有一个 id 为 total 的 span。

我有这个计算价格的功能，但似乎不起作用。

$(document).ready(function getTotal(){
var total = 0;
$('.price').each(function(){
    total += parseFloat(this.innerHTML)
});
$('#total').text(total);
getTotal();
});

【问题讨论】：

请定义“似乎不起作用”。
在 chrome 上，总数保持在 0，在 firefox 上，#total span 中没有数字
当您使用 Chrome 的开发人员工具运行代码时会发生什么？你有错误吗？
在萤火虫上没有错误，在铬上我似乎明白了；我不确定这意味着什么。未捕获的 RangeError：超出最大调用堆栈大小
超过最大调用堆栈大小，听起来你可能无意中递归。

标签： jquery append calculator

【解决方案1】：

尝试将您的 JS 放在 <script defer="defer"> 标记中，这意味着它会最后运行 - 您的函数可能会在 Dom 完全完成之前尝试计算（虽然这可能只适用于早期版本的 jQuery）

或者添加一个 setTimeout 以在几秒钟后调用您的小计函数。

您可能还想为您的函数添加一些警报，确保其尝试定位的字段正确定位。

延迟：How exactly does <script defer="defer"> work?

设置超时：https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

【讨论】：

【解决方案2】：

你的功能：

$(document).ready(function getTotal(){
var total = 0;
$('.price').each(function(){
    total += parseFloat(this.innerHTML)
});
$('#total').text(total);
getTotal();
});

包含从 getTotal() 对 getTotal() 的调用。您无意中递归。

编辑：好的，试试这个：（如果你的代码有一个 jsfiddle 会更容易）

$(document).ready(function ()
{
    var total = 0;
    $('.price').each(function()
    {
        total += parseFloat(this.innerHTML)
    });

    $('#total').text(total);
});

【讨论】：

我该如何解决这个问题，抱歉，我不太清楚这意味着什么。我还是 jquery 的新手
那么，为什么要在函数结束时调用 getTotal()？
好点，但它是否存在似乎没有什么区别：/
这似乎有同样的效果，我假设问题是购物车一开始是空的，所以它的总数为 0。
是的，一开始。但是如果用户将一个对象添加到购物车中，价格需要相应上涨。

【解决方案3】：

您的计算逻辑似乎有效

var total = 0;
$('.price').each(function(){
    total += parseFloat(this.innerHTML)
});

但问题是您在其内部调用“getTotal()”函数。

试试

$(document).ready(function() {

var getTotal = function(){
  var total = 0;
  $('.price').each(function(){
      total += parseFloat(this.innerHTML);
  });
  return total;
}  

$('#total').text(getTotal());

});

【讨论】：

由于某种原因，这似乎仍然不起作用。 :/ 我认为这与购物车为空有关，计算为 0