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);//點擊刪除的時候，相當於刪除的添加的這一行
                }
            }
        }

 

更多內容請見原文，文章轉載自：https://blog.csdn.net/weixin_44519496/article/details/118541162