javascript - 每个产品的每次点击次数总和

Question

我的购物篮对象无法正常工作。我想对每个产品库存请求的增量按钮点击次数进行求和，并将其存储在 localStorage 中(之后我计划从总数中减少库存数量，以限制新请求并在没有剩余库存时删除产品卡)。

我尝试使用 localStorage 分配不同的键来对每个产品进行正确的求和。

更新工作版本!

HTML:

<div id="stock-1">1</div>
<button onclick="basket.increaseStockQtyForProductUntilMaxRange({id:1, max:10}).setRequestedStockCountForProduct(1)">+</button><button onclick="basket.decreaseForProduct(1)">-</button><button onclick="basket.addProductRequestToBasket(1).setNewMaxIncrementForProduct(1).resetCounterForProduct(1)">add</button>

<div id="stock-2">1</div>
<button onclick="basket.increaseStockQtyForProductUntilMaxRange({id:2, max:10}).setRequestedStockCountForProduct(2)">+</button><button onclick="basket.decreaseForProduct(1)">-</button><button onclick="basket.addProductRequestToBasket(2).setNewMaxIncrementForProduct(2).resetCounterForProduct(2)">add</button>

<div id="stock-3">1</div>
<button onclick="basket.increaseStockQtyForProductUntilMaxRange({id:3, max:10}).setRequestedStockCountForProduct(3)">+</button><button onclick="basket.decreaseForProduct(3)">-</button><button onclick="basket.addProductRequestToBasket(3).setNewMaxIncrementForProduct(3).resetCounterForProduct(3)">add</button>
<hr> 

VanillaJS:

/**
 * A simple e-commerce basket snippet based on builder design pattern
 */
function Basket() {
   this.requestedStockQtyForProduct = {};
   this.remainingMaxRequestForProductStockQty = {};
}

Basket.prototype = {
  /**
   * @param {Integer} id  Holds div id data
   */
  stockCountOfProduct(id) {
    return document.getElementById('stock-' + id);
  },
  /**
   * @param {Object} data Holds product id and maximum range for increasing button
   */
  increaseStockQtyForProductUntilMaxRange(data) {
    var stockCount = this.stockCountOfProduct(data.id);

    if (! this.remainingMaxRequestForProductStockQty.hasOwnProperty(data.id)){
       this.remainingMaxRequestForProductStockQty[data.id] = data.max;
    }

    if (stockCount.innerHTML < this.remainingMaxRequestForProductStockQty[data.id]) {
         stockCount.innerHTML = parseInt(stockCount.innerHTML) + 1;
    } 

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  decreaseForProduct(id) {
    var stockCount = this.stockCountOfProduct(id);

    if (stockCount.innerHTML > 1) {
         stockCount.innerHTML = parseInt(stockCount.innerHTML) - 1;
    } 
  },

  /**
   * @param {Integer} id  Holds div id data
   */
  setRequestedStockCountForProduct(id) {
    var stockCount = this.stockCountOfProduct(id);

    if (! this.requestedStockQtyForProduct.hasOwnProperty(id)){
      this.requestedStockQtyForProduct[id] = [];
    }

    this.requestedStockQtyForProduct[id] = parseInt(stockCount.innerHTML);
    window.localStorage.setItem(id, this.requestedStockQtyForProduct[id]);

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  getRequestedStockCountForProduct(id) {
    return window.localStorage.getItem(id);
  },

  /**
   * @param {Integer} id  Holds div id data
   */
  setNewMaxIncrementForProduct(id) {
    if (! this.remainingMaxRequestForProductStockQty.hasOwnProperty(id)){
      this.remainingMaxRequestForProductStockQty[id] = [];
    }

    var totalRequested = this.getRequestedStockCountForProduct(id);
    this.remainingMaxRequestForProductStockQty[id] -= totalRequested;
    alert(this.remainingMaxRequestForProductStockQty[id]);

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  resetCounterForProduct(id) {
    var elem = document.getElementById('stock-' + id);  

    if (this.remainingMaxRequestForProductStockQty[id] == 0) {
      elem.innerHTML = 0;
    } else {
      elem.innerHTML = 1;
    }

    return this;
  },
  /**
   * @param {Integer} id  Holds div id data
   */
  addProductRequestToBasket(id) {

    // AJAX stuff goes here
    return this;
  },

};


basket = new Basket();

这是当前代码的 JsFiddle 链接:

https://jsfiddle.net/bgul/85k4ovxm/295/

我期望每个产品都有不同的总和输出，但我得到了我执行的所有产品库存请求的总和。

Answer 1

可以使用产品 ID 作为键将总计存储在对象中。这样总数就不会混淆。查看下面更新的示例:

function Basket() {

   this.requestedStockQtyByProduct = {};
}

Basket.prototype = {

    incrementForProductId(id) {

    var elem = document.getElementById('stock-' + id);
    elem.innerHTML = parseInt(elem.innerHTML) + 1;

    if(!this.requestedStockQtyByProduct.hasOwnProperty(id)){
      this.requestedStockQtyByProduct[id] = [];
    }
    this.requestedStockQtyByProduct[id].push(parseInt(elem.innerHTML));


    var result = this.requestedStockQtyByProduct[id].reduce(function (prevItem, currentItem) {
        return prevItem + currentItem;
    }, 0)

    window.localStorage.setItem(id, result);

    },
  cleanTotalStockQtyForThisProduct(id) {
    window.localStorage.remove(id);
    var elem = document.getElementById('stock-' + id);
    elem.innerHTML = 0;
  },
  getTotalStockRequestForId(id) {
    alert(window.localStorage.getItem(id));
  },

};


basket = new Basket();

查看 jsfiddle:https://jsfiddle.net/maartendev/zbp3sg67/4/