zoukankan html css js c++ java

简单实现购物车相同物品累加

遇到过这样的一个需求，如何在商城的购物车里面自动累计相同的商品，而不是重新创建一个新的商品项，商品列表不需要使用+-号来控制商品的数量。网上找不到类似的方案，所以就自己写了一个，虽然不是最佳的解决方案。有更好的建议或者写法，请联系我，谢谢。

index.html

  1 <html lang="zh">
  2 
  3 <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6     <meta name="renderer" content="webkit">
  7     <title>礼品商城</title>
  8     <style>
  9         * {
 10             -webkit-box-sizing: border-box;
 11             -moz-box-sizing: border-box;
 12             box-sizing: border-box;
 13             margin: 0;
 14             padding: 0;
 15         }
 16         
 17         html,
 18         body {
 19             overflow-x: hidden;
 20             overflow-y: auto;
 21         }
 22         
 23         .good-list__bd {
 24             overflow: hidden;
 25             margin-top: 1%;
 26             margin-left: 1%;
 27             padding-bottom: 4%;
 28         }
 29         
 30         .good-list__item {
 31             float: left;
 32             overflow: hidden;
 33             width: 32.33333%;
 34             margin-right: 1%;
 35             margin-bottom: 1%;
 36             text-align: center;
 37             border: 1px solid #f5f5f5;
 38         }
 39         
 40         .good-list__image {
 41             width: 100%;
 42             height: 250px;
 43         }
 44         
 45         .good-list__name {
 46             font-size: 20px;
 47             line-height: 42px;
 48             overflow: hidden;
 49             width: 100%;
 50             height: 42px;
 51             margin-bottom: 8px;
 52         }
 53         
 54         .good-list__btn {
 55             font-size: 15px;
 56             line-height: normal;
 57             display: block;
 58             width: 120px;
 59             height: 40px;
 60             margin: 15px auto;
 61             color: #fff;
 62             border: none;
 63             border-radius: 5px;
 64             background-color: #f00;
 65             -ms-flex-item-align: auto;
 66             align-self: auto;
 67         }
 68         
 69         .good-car {
 70             position: fixed;
 71             z-index: 999;
 72             bottom: 0;
 73             width: 100%;
 74             height: 60px;
 75             background: #000;
 76         }
 77         
 78         .good-car-btn {
 79             font-size: 24px;
 80             line-height: 60px;
 81             float: right;
 82             width: 10%;
 83             color: #fff;
 84         }
 85         
 86         .good-car-btn,
 87         .good-icon__round {
 88             height: 60px;
 89             text-align: center;
 90             background: #f40;
 91         }
 92         
 93         .good-icon__round {
 94             position: absolute;
 95             top: -10px;
 96             left: 10px;
 97             width: 60px;
 98             border-radius: 50%;
 99         }
100         
101         .good-icon__point {
102             font-size: .1rem;
103             position: absolute;
104             top: 1px;
105             right: 0;
106             display: block;
107             width: 15px;
108             height: 15px;
109             color: #fff;
110             border-radius: 50%;
111             background: red;
112         }
113         
114         .good-car__name {
115             display: inline-block;
116             vertical-align: top;
117         }
118         
119         .good-icon {
120             display: block;
121             width: 40px;
122             height: 40px;
123             margin: 10px auto;
124         }
125         
126         .good-car__bd {
127             position: absolute;
128             bottom: 60px;
129             display: none;
130             width: 100%;
131             border-top: 1px solid #f00;
132             background: #fff;
133         }
134         
135         .good-car__img {
136             width: 50px;
137             height: 50px;
138         }
139         
140         .good-car__item {
141             padding: 12px;
142         }
143         
144         .good-car__count {
145             float: right;
146             margin-right: 20px;
147         }
148     </style>
149 </head>
150 
151 <body>
152     <div class="wrap">
153         <!-- 商品列表 -->
154         <div class="good-list">
155             <ul class="good-list__bd"></ul>
156         </div>
157         <!-- 购物车 -->
158         <div class="good-car">
159             <ul class="good-car__bd">
160             </ul>
161             <div class="good-icon__round" data-shop="1">
162                 <span class="good-icon__point">0</span>
163                 <img class="good-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHlSURBVFhH7de9SxxBGMfx06AiRgQrtUij9rYBC18qSUARDOJ/IKQR/R+sU0QFQex8acVCAkYsxcpCsRDFTtOkMlEU/T5wDzwM4+3d3szuifeDD8ety8zjzsPMXoE8J+hCrvEVZU0j1/iKslaQa6Y8dqAFnqLmIstqn2LufehGCrIF5t6HvpxBC8y9D32RorTAeh+myZvrw2W5UGup92G1cfvwANsZmkRibB9m7TMSY/swSzdoRGLcPtyDbzlCeIDOs4qyktV+2A87zwTKThbn8jx0jv/4iLJj+1CKjZF96By7cqGSxN4PO/EIHX8WFSV2H87Ajv8JFUeOOh0gdB9uQsc+kQtpEqsPm/AXOvYiUiVWH47AjjuIVInVhz+gY8rp8QGpY/tQfpr6frJW6hI65jqqSuxzWQquKm4fhiTncAeqituHIf3C+0sDBjBe/JTvpdKKYXxFj1yImT4cwy7TEXrhi/TvH+i9T/iJZgRPO65gi1MXaIPNKOzLgLWE4PkO32RK/m5zCN99QgrvRtDIhuqbTLkb7j/47lNfEDSyLL6JlLtstvd8hhA08h/7JlJjsCn1xG/RguDZgm/CDbiRLeUa7r3Sf98QJfLWsYBz3Bc/5/Da24gUuQZ5Ynf4DdkTS6RQeAGh7aMfK2AISAAAAABJRU5ErkJggg==">
164             </div>
165             <div class="good-car-btn">去结算</div>
166         </div>
167     </div>
168     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
169     <script type="text/javascript" src="./index.js"></script>
170 </body>
171 
172 </html>

index.js

var getlistGoodJsonHtml = "", //商品列表
    listHtml = "", //购物车商品列表
    shopArr = [], //购物车数组
    num = 1; //商品数量

$(function() {

    var listGoodJson = {
        "goods": [{
                "id": "1",
                "name": "商品1",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "2",
                "name": "商品2",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "3",
                "name": "商品3",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "4",
                "name": "商品4",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "5",
                "name": "商品5",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "6",
                "name": "商品6",
                "img": "http://via.placeholder.com/500x500"
            }

        ]
    }

    //初始化商品列表
    initGoodList();

    function initGoodList() {
        var getlistGoodJson = listGoodJson.goods;
        for (var x in getlistGoodJson) {
            getlistGoodJsonHtml += "<li class='good-list__item' id='" + getlistGoodJson[x].id + "'><img class='good-list__image' src='" + getlistGoodJson[x].img + "'><p class='good-list__name'>" + getlistGoodJson[x].name + "</p><button class='good-list__btn'>兑换</button></li>"
        }
        $(".good-list__bd").append(getlistGoodJsonHtml);
    }

    //点击元素
    $(".good-list__bd").on("click", ".good-list__btn", function(e) {

        //获取点击商品的父节点            
        var parent = $(this)[0].parentNode;

        //获取点击的商品信息
        var goodID = parent.id;
        var goodPicUrl = parent.getElementsByClassName("good-list__image")[0].currentSrc;
        var goodName = parent.getElementsByClassName("good-list__name")[0].childNodes[0].wholeText;

        var goodsObj = {
            goodID: goodID,
            goodPicUrl: goodPicUrl,
            goodName: goodName
        }

        //转化成字符串
        var goodsObjStr = JSON.stringify(goodsObj);
        var shopArrStr = JSON.stringify(shopArr);

        //判断商品是否添加在购物车列表
        if (shopArrStr.indexOf(goodsObjStr) > 0) {
            // 在已有的购物车商品列表添加数量
            listHtml = "";
            num = parseInt($("#good" + goodsObj.goodID).text()) + 1;
            $("#good" + goodsObj.goodID).text(num);
        } else {
            // 新建商品item
            shopArr.push(goodsObj);
            listHtml = "<li class='good-car__item'><img class='good-car__img' src='" + goodsObj.goodPicUrl + "'/> <span class='good-car__name' >" + goodsObj.goodName + "</span><div class='good-car__count'>数量：<span class='good-car__num' id='good" + goodsObj.goodID + "'>1</span></div></li>";
        }
        $(".good-icon__point").text(shopArr.length);
        $(".good-car__bd").append(listHtml)
    });

    //购物车隐藏显示
    $(".good-icon__round").on("click", function() {
        if ($(".good-icon__round").attr("data-shop") === '1') {
            $(".good-car__bd").show();
            $(".good-icon__round").attr("data-shop", "0");
        } else {
            $(".good-car__bd").hide();
            $(".good-icon__round").attr("data-shop", "1");
        }
    });

})

查看全文

相关阅读:
Ubuntu 14.04 卸载通过源码安装的库
 Ubuntu 14.04 indigo 相关依赖
 Ubuntu 14.04 indigo 安装 cartographer 1.0.0
Ubuntu 14.04 改变文件或者文件夹的拥有者
 安装cartographer遇到Unrecognized syntax identifier "proto3". This parser only recognizes "proto2"问题
 Unrecognized syntax identifier "proto3". This parser only recognizes "proto2". ”问题解决方法
 查看所有用户组，用户名
 1卸载ROS
Ubuntu14.04 软件安装卸载
 Ubuntu14.04系统显示器不自动休眠修改

原文地址：https://www.cnblogs.com/Sroot/p/8043561.html