在 javascript 中制作购物车时，我被购物车中已有的功能卡住了？

Question

var products = [

  ["Product1", 1, "100", "1"],
  ["Prodict2", 1, "99", "2"],
  ["Product3", 1, "60", "3"],
  ["Product4", 1, "50", "4"],


];

function displayProducts() {
  //alert('page');
  var productdata = "<div class='w3-container ' style='margin:50px 0;'>";

  for (i = 0; i < products.length; i++) {
    productdata += "<div class='w3-third'><div class='w3-row-padding w3-card w3-container w3-padding-32  w3-center'>" + products[i][0] + "<br> Rs " + products[i][2] + "<br> <button class='w3-btn w3-green w3-round'onclick='addtocart(" + i + ")'>Add to cart</button></div></div>";
  }
  productdata += "</div>";

  document.getElementById('display').innerHTML = productdata;

}


function addtocart(a) {
  cart.push(products[a]);
  if (products[a] == cart[a]) {
    alert("already in cart");
  }
  displaycart();
}



var cart = [];




function displaycart() {
  cartdata = '<table class="w3-table w3-centered w3-border w3-bordered w3-hoverable"><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th><th>Delete</th></tr>';


  var Subtotal = 0;

  for (i = 0; i < cart.length; i++) {

    Subtotal += cart[i][1] * cart[i][2]
    cartdata += "<tr><td>" + cart[i][0] + "</td><td><button class='w3-green w3-btn w3-circle' onclick= 'lessqty(" + i + ")'> - </button> " + cart[i][1] + " <button class='w3-green w3-btn w3-circle' onclick= 'addqty(" + i + ")'>+</button></td><td>" + cart[i][2] + "</td><td>" + cart[i][1] * cart[i][2] + "</td><td><button class='w3-btn w3-red ' onclick='delElement(" + i + ")'>️   </button></td></tr>"
  }
  cartdata += '<tr><td></td><td></td><td></td><td><b>' + Subtotal + '</b></td><td></td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function delElement(a) {
  cart.splice(a, 1);
  displaycart();
}

function addqty(a) {
  cart[a][1] = cart[a][1] + parseInt(1);

  displaycart();
}

function lessqty(a) {
  cart[a][1] = cart[a][1] - parseInt(1);
  if (cart[a][1] == 0) {

    alert('quantity cannot be zero!');
    cart[a][1] = parseInt(1);
  }
  displaycart();
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body onload="displayProducts()">
  <div class="" id="display" style="max-width:800px; margin:auto;"></div>
  <div class="" id="cart"></div>
</body>

如果用户两次尝试在购物车中添加类似产品，它应该向用户显示一条错误消息在购物车中但不确定如何将它与购物车中数组的值进行比较我在 addtocart() 函数中尝试了特定的东西但它没有给出正确的输出

请告诉我如何检查产品是否已在购物车中

提前致谢

Answer 1

您没有检查产品是否已正确放入购物车。根据您的示例数据，您应该检查购物车中的任何条目是否与要添加的产品具有相同的产品名称：

function addtocart(a) {
  if (cart.some(p => p[0] == products[a][0])) {
    alert("already in cart");
  } else {
    cart.push(products[a]);
  }
  displaycart();
}

另请注意，您不应添加到购物车除非该产品尚未在购物车中。

演示：

var products = [
  ["Product1", 1, "100", "1"],
  ["Product2", 1, "99", "2"],
  ["Product3", 1, "60", "3"],
];

function displayProducts() {
  //alert('page');
  var productdata = "<div class='w3-container ' style='margin:50px 0;'>";

  for (i = 0; i < products.length; i++) {
    productdata += "<div class='w3-third'><div class='w3-row-padding w3-card w3-container w3-padding-32  w3-center'>" + products[i][0] + "<br> Rs " + products[i][2] + "<br> <button class='w3-btn w3-green w3-round'onclick='addtocart(" + i + ")'>Add to cart</button></div></div>";
  }
  productdata += "</div>";

  document.getElementById('display').innerHTML = productdata;

}


function addtocart(a) {
  if (cart.some(p => p[0] == products[a][0])) {
    alert("already in cart");
  } else {
    cart.push(products[a]);
  }
  displaycart();
}



var cart = [];




function displaycart() {
  cartdata = '<table class="w3-table w3-centered w3-border w3-bordered w3-hoverable"><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th><th>Delete</th></tr>';


  var Subtotal = 0;

  for (i = 0; i < cart.length; i++) {

    Subtotal += cart[i][1] * cart[i][2]
    cartdata += "<tr><td>" + cart[i][0] + "</td><td><button class='w3-green w3-btn w3-circle' onclick= 'lessqty(" + i + ")'> - </button> " + cart[i][1] + " <button class='w3-green w3-btn w3-circle' onclick= 'addqty(" + i + ")'>+</button></td><td>" + cart[i][2] + "</td><td>" + cart[i][1] * cart[i][2] + "</td><td><button class='w3-btn w3-red ' onclick='delElement(" + i + ")'>️   </button></td></tr>"
  }
  cartdata += '<tr><td></td><td></td><td></td><td><b>' + Subtotal + '</b></td><td></td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function delElement(a) {
  cart.splice(a, 1);
  displaycart();
}

function addqty(a) {
  cart[a][1] = cart[a][1] + parseInt(1);

  displaycart();
}

function lessqty(a) {
  cart[a][1] = cart[a][1] - parseInt(1);
  if (cart[a][1] == 0) {

    alert('quantity cannot be zero!');
    cart[a][1] = parseInt(1);
  }
  displaycart();
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body onload="displayProducts()">
  <div class="" id="display" style="max-width:800px; margin:auto;"></div>
  <div class="" id="cart"></div>
</body>

在 javascript 中制作购物车时，我被购物车中已有的功能卡住了？

while making a shopping cart in javascript i am stuck with a function already in cart?

javascript

arrays

multidimensional-array

shopping-cart