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

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

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

[html] view plain copy print?

1. .buy {  

2.             width: 200px;  

3.             height: 300px;  

4.             display: inline-block;  

5.             border: 1px dashed grey;  

6.             border-radius: 15px;  

7.             text-align: center;  

8.             margin: 0 20px;  

9.             padding: 5px;  

10.             box-sizing: border-box;  

11.         }  

12.   

13.         .buy img {  

14.             width: 150px;  

15.             height: 150px;  

16.         }  

17.   

18.         .buy:hover {  

19.             border-color: red;  

20.         }  

.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的样式

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

[html] view plain copy print?

1. <tr class="model2" style="display: none;">  

2.                <td>  

3.                    <img src="img/img1.jpg">  

4.                </td>  

5.                <td>OPPO R15新品</td>  

6.                <td>2999</td>  

7.                <td>1</td>  

8.                <td>2999</td>  

9.                <td>  

10.                    <a href="javascript:void(0)">删除</a>  

11.                </td>  

12.            </tr>  

 <tr class="model2" style="display: none;">
                <td>
                    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

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

[html] view plain copy print?

1. <div class="model1" style="display: none;">  

2.            <img src="img/img1.jpg">  

3.            <div class="desc">OPPO R15新品</div>  

4.            <div class="price">2999</div>  

5.            <div class="pay">加入购物车</div>  

6.        </div>  

 <div class="model1" style="display: none;">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/img1.jpg">
            <div class="desc">OPPO R15新品</div>
            <div class="price">2999</div>
            <div class="pay">加入购物车</div>
        </div>

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

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

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

[html] view plain copy print?

1. var products = [  

2.             { img: "img/img1.jpg", desc: "OPPO R15新品", price: 2999 },  

3.             { img: "img/img2.jpg", desc: "HUAWEI P20", price: 3788 },  

4.             { img: "img/img3.jpg", desc: "HUAWEI P20 Pro", price: 4988 },  

5.             { img: "img/img4.jpg", desc: "荣耀畅玩", price: 799 },  

6.             { img: "img/img5.jpg", desc: "vivo Y69全网通", price: 1199 }  

7.         ];  

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（）方法，实现一下将数据添加到网页之中。

[html] view plain copy print?

1. products.forEach(function (pro) {  

2.            var copy = $(".model1")[0].cloneNode(true);//克隆模板  

3.            // console.log(copy);  

4.            copy.className = "buy";//改变克隆的模板的class类名  

5.            copy.style.display = "inline-block";//将克隆的元素从隐藏转换为显示，因为可能有多个，所以我们将其转换为行内块  

6.            var _children = copy.children;//获取克隆元素的所有子节点，并重新赋值  

7.            _children[0].src = pro.img;  

8.            _children[1].innerHTML = pro.desc;  

9.            _children[2].innerHTML = pro.price;  

10.            $(".box")[0].appendChild(copy);//将克隆好的并做了修改的dom元素添加到指定位置。  

11.   

12.   

13.        });  

 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元素添加到指定位置。


        });

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

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

[html] view plain copy print?

1.         var btns = $(".pay");//获取所有需要添加功能的元素  

2.         for (var i = 0, len = btns.length; i < len; i++) {  

3.             btns[i].onclick = function () {  

4.                 var mes = this.parentNode.children;//获取点击的那个元素的父节点的所有子节点，然后再分别获取其中的值  

5.                 // console.log(mes);  

6.                 var img = mes[0].src,//获取图片的路径  

7.                     desc = mes[1].innerHTML,//获取desc信息  

8.                     price = mes[2].innerHTML;//获取价格信息  

9.                 var copy = $(".model2")[0].cloneNode(true);//克隆模板  

10.                 // console.log(img, desc, price);  

11.                 copy.className = "";//修改类名  

12.                 copy.style.display = "table-row";//让元素显示  

13.                 var _child = copy.children;//给模板中的元素修改value值  

14.                 _child[0].firstElementChild.src = img;  

15.                 _child[1].innerHTML = desc;  

16.                 _child[2].innerHTML = price;  

17.                 _child[4].innerHTML = price*1;  

18.                 $(".carbox table")[0].appendChild(copy);//添加到指定位置  

19.   

20.                 copy.lastElementChild.firstElementChild.onclick = function () {//为删除绑定点击事件  

21.                     copy.parentNode.removeChild(copy);//点击删除的时候，相当于删除的添加的这一行  

22.                 }  

23.             }  

24.         }  

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

译文出处