个人中心
gpt4 book ai didi

javascript - 购物车无法正常工作

转载 作者：行者123 更新时间：2023-11-28 05:12:13 24 4
gpt4 key购买 nike

购物车代码:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8" />
    <title>Shopping Cart</title>
    <script src="jquery-3.1.1.min.js"></script>
</head>
<body>
    <h1>Shopping Cart</h1>

    <div>
        <ul>
            <li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">Apple $1.22</a></li>
            <li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">Banana $1.33 </a></li>
            <li><a class="add-to-cart" href="#" data-name="Shoe" data-price="22.33">Shoe $22.33</a></li>
            <li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">Frisbee $5.22</a></li>
        </ul>
        <form>
            <button id="clear-cart">Clear Cart</button>
        </form>
    </div>

    <div>
        <ul id="show-cart">
            <!-- -->
        </ul>
    </div>
    <script>

        $(".add-to-cart").click(function(event) {
            event.preventDefault();
            var name = $(this).attr("data-name");
            var price = Number($(this).attr("data-price"));

            addItemToCart(name, price, 1);
            displayCart();
        });

        function displayCart() {
            console.log("*** Display Cart ***");
            var cartArray = listCart();
            var output = "";
            for (var i in cartArray) {
                output += "<li>"+cartArray[i].name+" "+cartArray[i].count+"</li>"
            }
            $("#show-cart").html(output);
        }

        displayCart();

        // ************************************************************
        // Shopping Cart Functions

        var cart = [];
        var Item = function(name, price, count) {
            this.name = name
            this.price = price
            this.count = count
        };

        function addItemToCart(name, price, count) {
            for (var i in cart) {
                if (cart[i].name === name) {
                    cart[i].count += count;
                    return;
                }
            }
            var item = new Item(name, price, count);
            cart.push(item);
            saveCart();
        }

        function removeItemFromCart(name) { // Removes one item
            for (var i in cart) {
                if (cart[i].name === name) {
                    cart[i].count --;
                    if (cart[i].count === 0) {
                        cart.splice(i, 1);
                    }
                    break;
                }
            }
            saveCart();
        }

        function removeItemFromCartAll(name)  { // Removes all item name 
            for (var i in cart) {
                if (cart[i].name === name) {
                    cart.splice(i, 1);
                    break;
                }
            }
            saveCart();
        }



        function clearCart() {
            cart = [];
            saveCart();
        } 

        function countCart() { // --> return total count 
            var totalCount = 0;
            for (var i in cart) {
                totalCount += cart[i].count;
            }

            return totalCount;
        }

        console.log( countCart() );

        function totalCart() { // --> return total cost 
            var totalCost = 0;
            for (var i in cart) {
                totalCost += cart[i].price;
            }
            return totalCost;
        }

        console.log( totalCart() );

        function listCart() {  // --> array of Items 
            var cartCopy = [];
            for (var i in cart) {
                var item = cart[i];
                var itemCopy = {};
                for (var p in item) {
                    itemCopy[p] = item[p];
                }
                cartCopy.push(itemCopy);
            }
            return cartCopy;
        }

        console.log( listCart() );

        function saveCart() {
            localStorage.setItem("shoppingCart", JSON.stringify(cart));
        }

        function loadCart() {
            cart = JSON.parse(localStorage.getItem("shoppingCart"));  
        }

        loadCart();




        // Shopping Cart Functions (complete)
        // ************************************************************

    </script>

我在重新加载时遇到此持续错误，它不会保存我所做的更改。例如，我订购了 2 个飞盘，值(value)一定金额(目前这并不重要)，但是当刷新它并单击订购某些产品时，购物车不会保存更改，即使它应该是这样到。我不确定问题出在哪里，所以我把整个内容粘贴到这里。

最佳答案

当您增加购物车中已有商品的数量时，您永远不会将商品保存到本地存储。

    function addItemToCart(name, price, count) {
        for (var i in cart) {
            if (cart[i].name === name) {
                cart[i].count += count;
                //need to do this here too.
                saveCart();
                //
                return;
            }
        }
        var item = new Item(name, price, count);
        cart.push(item);
        saveCart();
    }

否则，它只会在添加新商品时将购物车保存到本地存储，因此在此之前增加的商品不会保存到存储中。

关于javascript - 购物车无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41269643/

24 4 0
文章推荐： javascript - 显示/隐藏 Javascript 问题
文章推荐： c++ - 如何将 OpenCV 窗口设置为点击窗口？
文章推荐： c++ - 在屏幕上显示 vector
文章推荐： html - 如何将一个 DIV 居中放置在另一个 DIV 的 RHS 上的剩余空间中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com