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元素。

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

猜你喜欢