JavaScript做简单的购物车效果（增、删、改、查、克隆） |
您所在的位置：网站首页 › 网页购物车 › JavaScript做简单的购物车效果（增、删、改、查、克隆） |
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的样式 就上方这个例子来说，我们需要的模板可以像下方的代码所示： 
OPPO R15新品
2999
1
2999
删除
上面的是添加到购物车里面的元素的模板。
OPPO R15新品
2999
加入购物车
上面的是添加到推荐商品中的元素的模板。 在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 |
【本文地址】
今日新闻 |
推荐新闻 |