JS | “购物车”增、删、改、查的案例

<div class="main">
		<div class="top">
			商品名称：<input type="text" name="" value="" id="title" class="ipt" />
			商品价格：<input type="text" name="" value="" id="price" class="ipt" />
			<input type="button" value="加入购物车" class="btn" id="addcart" />
		div>
		<div class="cart">
			<div class="tr">
				<div><input type="checkbox" name="" value="" id="selectAll" /> 全选按钮div>
				<div>商品名称div>
				<div>商品价格div>
				<div>数量div>
				<div>操作div>
			div>
			
			<div id="goods">div>
		div>
		<div class="footer">
			总共<span id="count">0span>件商品,共计 <span id="amount">0span> 元
			<a href="javascript:;" class="r" id="delall">清空购物车a>
		div>
div>

            <div id="goods">
				<div class="tr" id="1655771835688">
					<div><input type="checkbox" name="ckboxs" value="1655771835688">div>
					<div>鼠标div>
					<div>100元div>
					<div>
                      <a href="javascript:;" name="-">-a> 
                      <input type="text" value="1>
                      javascript:;" name="+">+a>
                    div>
					<div><a href="javascript:;" name="del">删除a>div>
				div>
			div>

             //商品列表
             goods = [
				{ id: 1, title: '手机', price: 100, num: 1,checked:true},
				{ id: 2, title: '电脑', price: 1000, num: 1,checked:true},
				{ id: 3, title: '鼠标', price: 10, num: 1,checked:false},
			];

           //【方法】渲染数据到页面上
			render() {
				var str = '';
				// //循环所有的商品
				for(var i=0; i<this.goods.length; i++){
					str = str +"
+this.goods[i].id+"\">";
					str = str +"
+this.goods[i].id+"\" "+(this.goods[i].checked?"checked":"")+">
";
					str = str +"
"+this.goods[i].title+"
";
					str = str +"
"+this.goods[i].price+"元
";
					str = str +"
- +this.goods[i].num+"\" > +
";
					str = str +"
删除
";
					str = str +"
"

其中，id、title、price、num以及单选框都不是固定的。铺垫已经做好了，我们来根据需求写相应的代码。

一、增（添加记录）

需要概述：当我们在“商品名称”和“商品价格”输入框中输入我们想要的商品与价格时，点击【加入购物车】按钮，我们的记录会被添加到商品列表中。

            //获取节点元素
			addCart = document.querySelector('#addcart')//添加事件按钮
 
			//监听事件
			addEvent() {
				var _this = this
				//添加数据
				this.addCart.addEventListener('click', function () {
					var title = document.querySelector('#title').value
					var price = document.querySelector("#price").value
					_this.addGoods({ title, price })
				})
			}
			//添加数据
			addGoods(obj) {
				//获取随机id
				obj.id = new Date().getTime() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString();
				obj.num = 1;
				obj.checked = false;
				this.goods.push(obj);
				//重新渲染数据
				this.render()
			}

 我们先获取元素节点(addCart),然后注册监听事件。这里有两个点需要我们注意一下：

1. 监听事件和修改数据我们是分开写的，监听事件内部的this，指向的是按钮，调用不了外部的方法，所以我们在监听事件外部var了一个新的变量_this，并且把外部的this赋值给了_this,监听事件内部使用_this,当它找不到时，会到外部找_this，而此时_this = this,所以我们的监听函数就可以使用外部的【添加数据】、【删除数据】等方法了。
2. 根据时间戳获取随机Id.

二、删（删除不想要的记录）

当我们点击“删除”按钮时，我们这一条数据都会被移除，我们先考虑一下，需要操作哪一个节点？我们要从数组中移除数据我们需要用到哪个API？ 

 通过图片我们可以看到，“删除”标签与这一条数据的关系是：“删除”的父元素的父元素，所以我们可以获取"goods"这个节点，通过事件委派来实现；而数组删除数据，我们可以使用splice这个API。

三、单选框/全选按钮

页面中的单选框，我们单选框我们在单击时，我们看到的是单选框被勾上了或者没有被勾上，但是在我们的数据里，当我们没有选时，它的checked是否为false?就是我们在更改页面的checkbox时，是否能真正改变我们的数据呢。

这是我们没有写JS代码时的情况，数据并不会因为单选框是否被选上而改变，所以我们需要获取元素节点来操作数据。  因为和删除记录是同一个事件，所以我写在一起了。

 可以看到，当我们点击单选框时，数据中相应的状态也得到了改变。

四、总价格、总数量以及“清空购物车” 

首先，我们要获取count、amount以及清空购物车等元素节点。

• 总数量：对每一个商品进行for循环，当checked时，累加num
• 总价格：当checked时，当前商品数量*商品价格，并且进行累加
• 清空购物车：添加事件，当点击时，把goods数组变成空数组。

因为逻辑比较简单，我就直接把所有的代码放在这了，大家可以整体看一下！