Question

问题在于subtractQuantity函数。例如，当我添加两个产品时，我点击了第一个产品的减去数量按钮，第二个产品也减去了它的数量。它应该是第一个减去数量的产品，因为我点击了第一个产品的减去数量按钮。第二个问题是当数量为0时，它应该自动删除产品，但Error表示array.splice不是一个函数。 PS：我正在使用ECMASCRIPT 6如果我没有使用ECMASCRIPT 6或者在我的代码中改进什么，请自由指导我

＆＃13;

const cart = {};

function AddtoCart(productid, description, quantity, price) {
  if (cart[productid]) {
    cart[productid].qty += quantity;
  } else {
    cart[productid] = {
      id: productid,
      desc: description,
      qty: quantity,
      price: price
    };
  }
  calculateGrandTotal();
  document.getElementById("total").innerHTML = GrandTotal;
  console.log(GrandTotal);
  viewCart();
  
  }
  function subtractQuantity(productid){
      if(cart[productid].qty > 0){
        cart[productid].qty--;
      }
      if (cart[productid].qty == 0) {
         delete cart[productid]//Remove from cartreturn false;
      }
    viewCart();
  }

function calculateGrandTotal(){
    GrandTotal = 0;
    for(let productid in cart){
        if(cart.hasOwnProperty(productid)){
            GrandTotal += parseFloat(cart[productid].price) * parseInt(cart[productid].qty);
        }
    }
}
function viewCart() {
  let tbody = document.getElementById('cartsBody');
  tbody.innerHTML = '';
  Object.values(cart).forEach(content => {
    tbody.innerHTML += `<td>${ content.id }</td>
                      <td>${ content.desc }</td>
                      <td>${ content.qty }</td>
                      <td>${ content.price }</td>
                      <td>${ content.qty * content.price }</td>
                      <td><button type='submit' onClick='subtractQuantity(${content.id})'>subtract Quantity</button></td>`;
  }); 
}

＆＃13;

<script src="script.js"></script>

<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 79000,0)" />
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 1, 18000,0)" />
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 25000,0)" />

<table border="1" id="cartsTable">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="cartsBody">
  </tbody>
</table>
<h4>Total:</h4>
<p id="total"></p>

＆＃13;

Answer 1

工作解决方案

＆＃13;

const cart = {};

function AddtoCart(productid, description, quantity, price) {
  if (cart[productid]) {
    cart[productid].qty += quantity;
  } else {
    cart[productid] = {
      id: productid,
      desc: description,
      qty: quantity,
      price: price
    };
  }
  
  document.getElementById("total").innerHTML = calculateGrandTotal();
  console.log(GrandTotal);
  viewCart();
  
  }
  function subtractQuantity(productid){
      if(cart[productid].qty > 0){
        cart[productid].qty--;
      }
      if (cart[productid].qty == 0) {
         delete cart[productid]//Remove from cartreturn false;
      }
       document.getElementById("total").innerHTML = calculateGrandTotal();
    viewCart();
  }

function calculateGrandTotal(){
    GrandTotal = 0;
    for(let productid in cart){
        if(cart.hasOwnProperty(productid)){
            GrandTotal += Number.parseFloat(cart[productid].price) * Number.parseInt(cart[productid].qty);
        }
    }
    return GrandTotal;
}
function viewCart() {
  let tbody = document.getElementById('cartsBody');
  tbody.innerHTML = '';
  Object.values(cart).forEach(content => {
    tbody.innerHTML += `<td>${ content.id }</td>
                      <td>${ content.desc }</td>
                      <td>${ content.qty }</td>
                      <td>${ content.price }</td>
                      <td>${ content.qty * content.price }</td>
                      <td><button type='submit' onClick='subtractQuantity(${content.id})'>subtract Quantity</button></td>`;
  }); 
}

＆＃13;

<script src="script.js"></script>

<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 79000,0)" />
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 1, 18000,0)" />
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 25000,0)" />

<table border="1" id="cartsTable">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="cartsBody">
  </tbody>
</table>
<h4>Total:</h4>
<p id="total"></p>

＆＃13;

Answer 2

而不是：

cart.splice()

使用：

delete cart[productid]

Splice用于数组，另一个解决方案是将数据库设为数组：

const cart = []

修改

对于第一个问题，不要通过所有购物车属性进行迭代，而是发送您想要降低该品质的商品的ID：

onClick='subtractQuantity(' +content.id+')'

在您的减法功能上只需减少或删除：

function subtractQuantity(productid){ if(cart.hasOwnProperty(productid)){ cart[productid].qty--; } if (cart[productid].qty == 0) { delete cart[productid]//Remove from cart } calculateGrandTotal(); viewCart();

}

Answer 3

splice是Array对象的一种方法。如果要在类似数组结构

上使用它

Array.prototype.splice.call(cart, productid,1)

至于从购物车中删除条目，您必须将this（您希望减少其数量的产品）传递给处理程序onClick='subtractQuantity(this)'和函数声明function subtractQuantity(this)

ps：如何应用这些说明取决于您。祝你好运

减去几个产品的数量和Array.Splice不是一个函数

3 个答案: