Question

我有这个JSFiddle：https://jsfiddle.net/99efL4xz/2/

部分JS：

function addToBasket(title, sku, price, image, qty) {
  // update sku if product is already present
  $.each(basket, function (product) {
    if (basket[product].sku === sku) {
      basket[product].sku = sku;  // replace existing Qty
      saveBasket();

      return;
    }
  });

  // create object
  var item = { title: title, sku: sku, price: price, image: image, qty: qty }; 
  basket.push(item);
  saveBasket();
}

的问题：

当我添加到购物车时，它工作正常...如果我添加另一个它添加为新项目而不是通过SKU更新购物车项目并增加数量
它会更新购物车中的购物车数量和价格，但是当您添加另一个时它没有变化......我正在努力更新它并将其解决。

Answer 1

正如@MikeC指出的那样，您在sku找到了对象，但随后将匹配的sku分配给该属性，结果没有实际变化。

您似乎想要更新qty。

此外，您的return语句位于$.each回调中，因此不会阻止$.each下方的代码运行。

ECMAScript 6提供了许多新的Array方法，其中一种方法是.find()。我建议使用它来定位Array中的对象，然后在找到它时更新它，或者如果没有则推送新项目。

function addToBasket(title, sku, price, image, qty) {
  // update sku if product is already present
  var product = basket.find(function (prod) {
    return prod.sku === sku
  })

  if (product) { // found an object, so update it with the new quantity
    product.qty = qty

  } else { // no object found, so create a new object
    basket.push({ title: title, sku: sku, price: price, image: image, qty: qty });
  }

  saveBasket();
}

回调到.find()的返回值确定数组中的当前项是否是您想要的。返回true（或任何truthy值）使迭代停止，并为您提供该对象。如果没有项目返回真值，则返回undefined。

然后在循环之后，如果找到了一个对象，则更新它，如果没有，则更新一个。

您需要将.find()修补到旧版浏览器中。我链接的MDN文档中有一个polyfill。

jQuery购物车功能有一些小问题

1 个答案: