html 我如何添加删除项目和增加数量,并增加价格,同时增加或减少我的购物车的数量,

qyyhg6bp  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(152)

这是来自telmo sampiao的购物车系列的代码,im缺少删除项目和增加/减少按钮,同时还包括它在本地存储。

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,我尝试了许多不同的东西,但没有工作

pw136qt2

pw136qt21#

您只能为几个不同的输入存储一个值。您需要分别标识每个输入的每个值。

超文本标记语言

添加一个唯一的属性“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>

J查询

我修改了你的代码。请看下面的注解。现在“数据键”被用作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)));
}

相关问题