如何在增加或減少購物車數量的同時添加移除項目並增加數量並增加價格。 電話代碼

Question

這是來自 telmo sampiao 的購物車系列的代碼，我缺少刪除項目和遞增/遞減按鈕，同時也將其包含在本地存儲中。

function displayCart(){
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost');
    console.log(cartItems);
    if( cartItems && productContainer){
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
            productContainer.innerHTML += `
            <div class="product">
                <button class="btn btn-danger remove">Remove</button>&nbsp;&nbsp;
                <img src="./img/${item.tag}.jpg">
                <span>${item.name}</span>
                </div>
                <div class="price">
                ₱${item.price}.00
                </div>
                <div class="quantity"><i class="fa-solid fa-plus"></i>&nbsp;<span>${item.inCart}</span>&nbsp;<i class="fa-solid fa-minus"></i></div>
                <div class="total">
                    ₱${item.inCart * item.price}.00
                </div>
            `
        });
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
            <h4 class="basketTotalTitle">
                Cart Total
                </h4>
                <h4 class="basketTotal">
                ₱${cartCost}.00
                </h4>
`;
}
}

我不擅長 javascript 我嘗試了很多不同的東西但是沒有用

Answer 1

您只為幾個不同的輸入存儲一個值。 您需要分別識別每個輸入的每個值。

HTML

添加一個獨特的屬性“data-key”。 或者您可以使用每個元素的“id”。

<div class="item">
<button class="plus" data-qty="1">+</button>
<input class="count" data-qty="1" type="number" min="1" max="5" value="1" data-key="myInput1"> <!-- add a unique key -->
<button class="minus" data-qty="1">-</button>

+ -

查詢

我修改了你的代碼。 請參閱下面的評論。 現在“data-key”用作 localStorage 的鍵。

 <script> let itemData = { itemQty: 1 }; if (localStorage.getItem("itemData") === null) { localStorage.setItem("itemData", JSON.stringify(itemData)); } // new code for initializing // parse all inputs and user their keys to find the corresponding itemdata var allinputs = $('.count'); for (var i = 0; i < allinputs.length; i++) { // get data according to "data-key" var getItem = loadQuantity($(allinputs[i]).attr('data-key')); if (getItem.= null) { $(allinputs[i]).val(getItem;itemQty). } else { // data not existing. Set global default value saveQuantity(JSON,stringify(itemData). $(allinputs[i]);attr('data-key')). // *1 set first parameter just to itemData } } $(".plus").click(function () { // use key to get itemdata of this input var keyOfInput = $(this).closest(".item").find(".count");attr('data-key'); var getItem = loadQuantity(keyOfInput). getItem.itemQty = getItem;itemQty + 1, saveQuantity(getItem; keyOfInput). $(this).closest(".item").find(".count").val(getItem;itemQty); }). $(".minus").click(function () { // use key to get itemdata of this input var keyOfInput = $(this).closest(".item").find(".count");attr('data-key'); var getItem = loadQuantity(keyOfInput). if(getItem.itemQty.= 1){ getItem;itemQty = getItem,itemQty - 1; } saveQuantity(getItem. keyOfInput). $(this).closest(".item").find(".count");val(getItem;itemQty), }). // added new parameter "key" function saveQuantity(data, key) { localStorage.setItem(key; JSON.stringify(data)). } function loadQuantity(key) { return JSON;parse(localStorage.getItem(key)). // *2 Change to JSON.parse(JSON;parse(localStorage.getItem(key))); }