JavaScript做简单的购物车效果（增、删、改、查、克隆）

比如有时候遇到下面这种情况，点击加入购物车，然后在上方的购物车中动态的添加商品以及商品的信息，我们就可以通过JavaScript实现简单的这些操作。

首先我们需要在html文档中，通过css对页面的布局做一些简单的设置。并创建两个模板，其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。大致css样式如下：

    .buy {
                width: 200px;
                height: 300px;
                display: inline-block;
                border: 1px dashed grey;
                border-radius: 15px;
                text-align: center;
                margin: 0 20px;
                padding: 5px;
                box-sizing: border-box;
            }
     
            .buy img {
                width: 150px;
                height: 150px;
            }
     
            .buy:hover {
                border-color: red;
            }

上面是推荐商品中商品那个div的样式

就上方这个例子来说，我们需要的模板可以像下方的代码所示：

     <tr class="model2" style="display: none;">
                    <td>
                        <img src="img/img1.jpg">
                    </td>
                    <td>OPPO R15新品</td>
                    <td>2999</td>
                    <td>1</td>
                    <td>2999</td>
                    <td>
                        <a href="javascript:void(0)">删除</a>
                    </td>
                </tr>

上面的是添加到购物车里面的元素的模板。

     <div class="model1" style="display: none;">
                <img src="img/img1.jpg">
                <div class="desc">OPPO R15新品</div>
                <div class="price">2999</div>
                <div class="pay">加入购物车</div>
            </div>

上面的是添加到推荐商品中的元素的模板。

在html和css都已经设置好了之后，我们就开始写js代码，实现动态的添加和删除。

首先我们先获取所有商品的信息，这个一般情况是从后台数据库那里得到，今天这个是一个简单的例子，我们就直接定义几个商品。如下所示：

    var products = [
                { img: "img/img1.jpg", desc: "OPPO R15新品", price: 2999 },
                { img: "img/img2.jpg", desc: "HUAWEI P20", price: 3788 },
                { img: "img/img3.jpg", desc: "HUAWEI P20 Pro", price: 4988 },
                { img: "img/img4.jpg", desc: "荣耀畅玩", price: 799 },
                { img: "img/img5.jpg", desc: "vivo Y69全网通", price: 1199 }
            ];

这是定义的这个商品是一个数组，所以我们可以用数组的forEach（）方法，实现一下将数据添加到网页之中。

     products.forEach(function (pro) {
                var copy = $(".model1")[0].cloneNode(true);//克隆模板
                // console.log(copy);
                copy.className = "buy";//改变克隆的模板的class类名
                copy.style.display = "inline-block";//将克隆的元素从隐藏转换为显示，因为可能有多个，所以我们将其转换为行内块
                var _children = copy.children;//获取克隆元素的所有子节点，并重新赋值
                _children[0].src = pro.img;
                _children[1].innerHTML = pro.desc;
                _children[2].innerHTML = pro.price;
                $(".box")[0].appendChild(copy);//将克隆好的并做了修改的dom元素添加到指定位置。
     
     
            });

经过上面的代码之后，我们已经在网页中动态的添加了一些元素数据。接下来就是实现添加购物车以及删除的功能。

实现添加以及删除的代码如下：

            var btns = $(".pay");//获取所有需要添加功能的元素
            for (var i = 0, len = btns.length; i < len; i++) {
                btns[i].onclick = function () {
                    var mes = this.parentNode.children;//获取点击的那个元素的父节点的所有子节点，然后再分别获取其中的值
                    // console.log(mes);
                    var img = mes[0].src,//获取图片的路径
                        desc = mes[1].innerHTML,//获取desc信息
                        price = mes[2].innerHTML;//获取价格信息
                    var copy = $(".model2")[0].cloneNode(true);//克隆模板
                    // console.log(img, desc, price);
                    copy.className = "";//修改类名
                    copy.style.display = "table-row";//让元素显示
                    var _child = copy.children;//给模板中的元素修改value值
                    _child[0].firstElementChild.src = img;
                    _child[1].innerHTML = desc;
                    _child[2].innerHTML = price;
                    _child[4].innerHTML = price*1;
                    $(".carbox table")[0].appendChild(copy);//添加到指定位置
                    copy.lastElementChild.firstElementChild.onclick = function () {//为删除绑定点击事件
                        copy.parentNode.removeChild(copy);//点击删除的时候，相当于删除的添加的这一行
                    }
                }
            }

这样一个简单的动态添加，修改数据，删除，类似购物车的效果就做好了。

注：查找的dom对象何时需要加[0]下标：

当通过class名或者标签名获取对象的时候，然后又要对这个对象使用一些节点的方法的时候，就需要添加下标。因为这个时候返回的是一个伪数组，也可以说是一个集合，它并不是一个dom元素或者说是一个节点。所以需要给它添加一个下标，来调用这个集合中的dom元素。

欢迎关注微信公众号:猴哥说前端