Question

在这个网站上，我正在处理我遇到的一项新任务，然后继续前进。

在将商品添加到购物车时，计数器会根据需要添加购物车内的商品数量。但是，这就是我目前设法独自完成的工作，如果用户要删除某项，则计数器会重置为0，我知道原因。我设置了

var qty = document.querySelector('.total-qty')    qty.innerText = 0

如果我要添加2件T恤和1张相册并删除该相册，尽管购物车中仍然有2件物品，计数器将返回0。

我如何收集每个插入的物品，以及如何移除该物品以将计数器正确更新为购物车内剩余的物品？如果用户在使用输入微调器时尝试更改物品的数量，也会出现相同的问题

我是否遍历购物车内的所有行，然后从那里定位数量？

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    var qty = document.querySelector('.total-qty')
    qty.innerText = 0
    updateCartTotal()
    CartIsEmpty()
}


function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement.parentElement
    var title = shopItem.getElementsByClassName('product_description_h1')[0].innerText
    var price = shopItem.getElementsByClassName('product_price_button_price-2')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('product_image')[0].src
    var dressing = shopItem.getElementsByClassName('dressing_tab')[0].value
    var itemCount = document.getElementsByClassName('total-qty')[0].innerText
    for (var i = 0; i < itemCount.length; i++) {
        var itemCount = document.getElementsByClassName('total-qty')[i];
            itemCount.innerText=parseInt(itemCount.innerText)+1;
        }
    var id = shopItem.dataset.itemId
    addItemToCart(title, price, imageSrc, dressing, id)
    updateCartTotal()
}

https://jsfiddle.net/gracee1989/8d3sexo0/39/

Answer 1

您可以在删除一个后选择所有数量输入，并减少其值以获得新的总数。我将quantityInputs变量从ready移到了全局范围中，以在您的JSFiddle中实现这一点，但是如果您确实愿意，可以在removeCartItem内再次声明它：

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    const total = Array.from(quantityInputs).reduce((a, c) => a + Number(c.value), 0);
    var qty = document.querySelector('.total-qty')
    qty.innerText = total;
    updateCartTotal()
}

在这里，reduce通过给它一个初始值（在这种情况下为0）来工作，该初始值由变量a引用。然后，它将按顺序从每个输入中获取值，并将其添加到最后一个。

广义上讲，您可能想考虑将所有购物车值存储在像对象一样的数据结构中，而不是每次想要更新DOM时都从DOM中读取。这样可以更轻松地跟踪购物车的状态。

选择购物车中的物品并升级购物车的存放柜台

1 个答案: