每个产品的每次点击总和

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>

香草JS：

/**
 * 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 link：

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/

每个产品的每次点击总和

Summation for per clicks for every single product

javascript

ecmascript-5

更新的工作版本！