如何將相同的商品添加到購物車

Question

我希望在這個網站上能夠將相同的商品添加到購物車但不創建新行。 使用if (cartItemNames[i].innerText == title) {alert('This item is already added to the cart')return我會阻止用戶將相同的項目添加到購物車並彈出警報。

如果我想從循環中定位 cartItemNames[i] 元素以從與該 cartItemNames[i] 元素相同的行獲取數量輸入，我將如何繼續？

然后我只需將值加一並設置值？

但是，我必須使用 cartItemNames[i] 元素上的父方法和 getElementsByClassName 來查找購物車的行，然后在該行中輸入數量。

這給我帶來了另一個問題，如何找到購物車的行以及該行中輸入的數量？

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

JSFiddle： https://jsfiddle.net/sigurd14/3z2c9hjn/1/

Answer 1

考慮到這種情況，這很好用。

只需檢查包含您要添加的標題的行是否存在。 我建議您使用 ID 來實現唯一性。

此外，使用querySelector和querySelectorAll使您的代碼看起來更干凈，並刪除對零索引的檢查。

function addItemToCart(title, price, imageSrc) {
  const exists = [...document.querySelectorAll('.cart-row')].find(row => {
    const target = row.querySelector('.cart-item-title');
    return target && target.textContent === title;
  });

  if (exists) {
    const input = exists.querySelector('.cart-quantity-input');
    input.value = parseInt(input.value, 10) + 1;
  } else {
    var cartItems = document.querySelector('.cart-items');
    var cartRow = document.createElement('div');
    var cartRowContents = `
      <div class="cart-item cart-column">
        <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
          <span class="cart-item-title">${title}</span>
      </div>
      <span class="cart-price cart-column">${price}</span>
      <div class="cart-quantity cart-column">
        <input class="cart-quantity-input" type="number" value="1">
        <button class="btn btn-danger" type="button">REMOVE</button>
      </div>`
    cartRow.classList.add('cart-row');
    cartRow.innerHTML = cartRowContents;
    cartItems.append(cartRow);
    cartRow.querySelector('.btn-danger').addEventListener('click', removeCartItem);
    cartRow.querySelector('.cart-quantity-input').addEventListener('change', quantityChanged);
  }
}

Answer 2

您只需要為您添加的行列找到正確的選擇器。 由於您沒有真正為每個項目分配行，因此您必須通過您找到的每個項目的列索引來 go 。 我更新了您發布的小提琴，這更新了數量和購物車總數

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            //alert('This item is already added to the cart')
            var priceCol=cartItems.getElementsByClassName('cart-price')[i];
            var qty=cartItems.getElementsByClassName('cart-quantity-input')[i];
            qty.value=parseInt(qty.value)+1;
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 0
    for (var i = 0; i < cartRows.length; i++) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
        var price = parseFloat(priceElement.innerText.replace('$', '')).toFixed(2);
        var quantity = quantityElement.value
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}

https://jsfiddle.net/z26bwhk1/1/