Question

以下是可以轻松实现这一目标的代码：http://codepen.io/kaisle/pen/rLqEXY

长话短说：点击＆＃39; +＆＃39;其中一个产品的按钮。＆＃34;当前订单＆＃34;框现在显示具有该风味的列表项，您选择的数量以及总价。＆＃34;订单总数＆＃34;现在显示在当前订单div上，当您点击它们时，将通过批发订单项目的价格进行调整。问题是每个类别中的最后一项未包含在总价中。

要对此进行测试：点击＆＃39; +＆＃39;一次为'Craft Soda - 10mg THC / can＆＃39;中的每种味道。＆＃34;订单总数＆＃34;应该是180美元（每次5种口味36美元）。而是＆＃34;订单总数＆＃34;显示144美元（包括前四种口味，5中的最后一种不是）。下面是生成列表项的.each代码。

$('.picker .product.hardcandy .qty').each(function(i, e) {
      var $this = $(this);
      var orderAmt = parseInt($this.find('.amt').html());
      var itemPrice = orderAmt*($(this).siblings('.wholesale-pricing').children('.priceper').html());


      if (orderAmt > 0) {
            chosenHardCandy += '<li>' + orderAmt + ' x ' + $this.find('.flavor').html() + ' Hard Candy - $' + '<span class="newPriceHardCandy">' + itemPrice + '</span></li>';
      }

     var sum = 0;

    $('.newPriceHardCandy').each(function(){
        sum += parseFloat($(this).text());
    });    

    $('.indTotalHardCandy').html(sum);
        $('.currentorder .chosen.hardcandy').html(chosenHardCandy);
});

以下代码中的某些内容（我相信）是它破解的地方。下面代码的要点：如果订单金额至少为1，请在列表中添加一个新的列表项，在此示例格式中：＆＃39; 3 x Root Beer Hard Candy - $ 540＆＃39;。然后取总和（在本例中为540），将其添加到其他列表项的其他总和，并输出总数

if (orderAmt > 0) {
      chosenHardCandy += '<li>' + orderAmt + ' x ' + $this.find('.flavor').html() + ' Hard Candy - $' + '<span class="newPriceHardCandy">' + itemPrice + '</span></li>';
}

            var sum = 0;
$('.newPriceHardCandy').each(function(){
    sum += parseFloat($(this).text());
});

我在想我只是简单地跳过一些东西。我发现在每个项目的末尾添加一个空产品风味线的快速修复，但这似乎是对我的jquery可能出错的东西的一个糟糕的修复。

Answer 1

问题是你是根据DOM中不存在的元素来计算总和。

目前，您首先使用变量.newPriceHardCandy中的chosenHardCandy元素创建HTML的字符串。然后尝试使用$('.newPriceHardCandy').each()对它们求和，但是选择已经在DOM中的元素，而不是字符串中的元素。然后在之后使用$('.currentorder .chosen.hardcandy').html(chosenHardCandy);

将实际元素添加到DOM

您需要更改代码的顺序，首先将该字符串的html添加到DOM，然后计算总和。

此外，没有必要继续重新计算外部.each()语句中的总和，但是您当前执行的事实是您获得除最后一项之外的所有内容的总和：到最后一次迭代运行时你已经用所有以前的项目更新了DOM，所以sum代码找到了那些，它只是找不到那个只存在于该点的字符串变量中的最后一个。

所以尝试这样的事情：

// FIRST build a string of elements to total
$('.picker .product.hardcandy .qty').each(function(i, e) {
  var $this = $(this);
  var orderAmt = parseInt($this.find('.amt').html());
  var itemPrice = orderAmt * ($(this).siblings('.wholesale-pricing').children('.priceper').html());

  if (orderAmt > 0) {
    chosenHardCandy += '<li>' + orderAmt + ' x ' + $this.find('.flavor').html() + ' Hard Candy - $' + '<span class="newPriceHardCandy">' + itemPrice + '</span></li>';
  }
});
// SECOND add the string to the DOM
$('.currentorder .chosen.hardcandy').html(chosenHardCandy);

// FINALLY calculate the sum
var sum = 0;
$('.newPriceHardCandy').each(function() {
  sum += parseFloat($(this).text());
});
$('.indTotalHardCandy').html(sum);

以下是您的演示的分叉版本，并进行了更改：http://codepen.io/anon/pen/rLqXGA - 注意：我还点击了“整齐的JS”选项，我将修复仅应用于到硬糖部分代码 - 您需要为苏打水等做同样的事情。

Jquery每个函数不包括＆＃34;每个＆＃34;

1 个答案: