如何防止在购物车中两次添加相同的产品

Question

Can you please tell me what i did wrong in js code ...I'm trying to prevent adding the the same product twice by clicking 'add to cart' button then alert him that this product was already added in the shopping cart你能告诉我我在 js 代码中做错了什么......我试图通过单击“添加到购物车”按钮来防止添加相同的产品两次，然后提醒他该产品已添加到购物车中

JS code: JS代码：

 function ready() { //REMOVE THE SHOPPING ITEM FROM THE CART var removeCartItemButtons = document.getElementsByClassName('btn-danger') for (var i = 0; i < removeCartItemButtons.length; i++) { var button = removeCartItemButtons[i] button.addEventListener('click', removeCartItem) } var quantityInputs = document.getElementsByClassName('cart-quantity-input') for (var i = 0; i < quantityInputs.length; i++) { var input = quantityInputs[i] input.addEventListener('change', quantityChanged) } var addToCartButtons = document.getElementsByClassName('add-to-cart') for (var i = 0; i < addToCartButtons.length; i++) { var button = addToCartButtons[i] button.addEventListener('click', addToCartClicked) } } function addToCartClicked(event) { event.preventDefault() var button = event.target var shopItem = button.parentElement.parentElement.parentElement.parentElement var title = shopItem.getElementsByClassName('shop-title')[0].innerText var price = shopItem.getElementsByClassName('new-price')[0].innerText var image = shopItem.getElementsByClassName('img')[0].src addItemToCart(title, price, image) } //Add the product to the shopping Cart function addItemToCart(title, price, image) { var cartRow = document.createElement('div') var cartItems = document.getElementsByClassName('cart-items')[0] var cartItemsNames = cartItems.getElementsByClassName('cart-title') //prevent the same product to be added twice for (var i = 0; i < cartItemsNames.length; i++) { if (cartItemsNames[i].innerText == title) { alert('error') return } } var cartRowContents = ` <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"><a href="#"></a></i> <a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">${title}</h5> <span class="product-color">Color : Black</span> <span class="product-size">Size : SL</span> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">${price}</strong> </div> </div> ` cartRow.innerHTML = cartRowContents cartItems.append(cartRow) }

 <html> <head> <title>shopping cart</title> </head> <body> <div class="cart-items"> <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"></i> <a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">product1</h5> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">$12.00</strong> </div> </div> </div> <div class="row shop-item"> <div class="col-xs-12 col-md-4"> <div class="list-img"> <div class="product-img"> <div class="pro-type"> <span>new</span> </div> <a href="#"><img src="img/products/13.jpg" class="img" alt="Product Title" /></a> </div> </div> </div> <div class="col-xs-12 col-md-8"> <div class="list-text"> <h3 class="shop-title">product1</h3> <h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5> <div class="list-btn"> <a href="#" class="add-to-cart" data-id="4">add to cart</a> </div> </div> </div> </div> </body> </html>

Here is the code what i did...can you please tell me what i did wrong in JS ?...thanks这是我所做的代码...你能告诉我我在 JS 中做错了什么吗？...谢谢

Answer 1

ready function in code snippet not run,you have to call it at the bottom.代码片段中的就绪函数未运行，您必须在底部调用它。

in addToCartClicked function, just use document instead shopItem在 addToCartClicked 函数中，只需使用 document 代替 shopItem

function addToCartClicked(event) {
  event.preventDefault()
  var title = document.getElementsByClassName('shop-title')[0].innerText
  var price = document.getElementsByClassName('new-price')[0].innerText
  var image = document.getElementsByClassName('img')[0].src
  addItemToCart(title, price, image)
}

in addItemToCart function just use document instead cartItems在 addItemToCart 函数中只使用文档而不是cartItems

function addItemToCart(title, price, image) {
  var cartRow = document.createElement('div')
  var cartItemsNames = document.getElementsByClassName('cart-title')
  //prevent the same product to be added twice
  for (let i = 0; i < cartItemsNames.length; i++) {
    if (cartItemsNames[i].innerText == title) {
      alert('error')
      return
    }
  }
  // ....
  // ....
}

The above changes are just to make your code clearer.以上改动只是为了让你的代码更清晰。

 function ready() { //REMOVE THE SHOPPING ITEM FROM THE CART var removeCartItemButtons = document.getElementsByClassName('btn-danger') for (var i = 0; i < removeCartItemButtons.length; i++) { var button = removeCartItemButtons[i] // button.addEventListener('click', removeCartItem) } var quantityInputs = document.getElementsByClassName('cart-quantity-input') for (var i = 0; i < quantityInputs.length; i++) { var input = quantityInputs[i] // input.addEventListener('change', quantityChanged) } var addToCartButtons = document.getElementsByClassName('add-to-cart') for (var i = 0; i < addToCartButtons.length; i++) { var button = addToCartButtons[i] button.addEventListener('click', addToCartClicked) } } function addToCartClicked(event) { event.preventDefault() console.log(123) var title = document.getElementsByClassName('shop-title')[0].innerText var price = document.getElementsByClassName('new-price')[0].innerText var image = document.getElementsByClassName('img')[0].src addItemToCart(title, price, image) } //Add the product to the shopping Cart function addItemToCart(title, price, image) { var cartRow = document.createElement('div') var cartItemsNames = document.getElementsByClassName('cart-title') //prevent the same product to be added twice for (let i = 0; i < cartItemsNames.length; i++) { if (cartItemsNames[i].innerText == title) { alert('error') return } } var cartRowContents = ` <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"><a href="#"></a></i> <a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">${title}</h5> <span class="product-color">Color : Black</span> <span class="product-size">Size : SL</span> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">${price}</strong> </div> </div> ` cartRow.innerHTML = cartRowContents cartItems.append(cartRow) } ready()

 <html> <head> <title>shopping cart</title> </head> <body> <div class="cart-items"> <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"></i> <a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">product1</h5> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">$12.00</strong> </div> </div> </div> <div class="row shop-item"> <div class="col-xs-12 col-md-4"> <div class="list-img"> <div class="product-img"> <div class="pro-type"> <span>new</span> </div> <a href="#"><img src="img/products/13.jpg" class="img" alt="Product Title" /></a> </div> </div> </div> <div class="col-xs-12 col-md-8"> <div class="list-text"> <h3 class="shop-title">product1</h3> <h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5> <div class="list-btn"> <a href="#" class="add-to-cart" data-id="4">add to cart</a> </div> </div> </div> </div> </body> </html>

如何防止在购物车中两次添加相同的产品

问题描述

1 个解决方案

解决方案1
0 2019-02-28 08:41:33

如何防止在购物车中两次添加相同的产品

问题描述

1 个解决方案

解决方案1 0 2019-02-28 08:41:33

解决方案1
0 2019-02-28 08:41:33