通过JQuery实现购物车的效果

今天，主要来说一下如何通过JQuery来实现一个简易版的购物车效果。

首先，通过ajax来进行请求。

// 1、通过ajax来进行请求
$.ajax({
   
	url: "data.json",
	success: function(arr){
   
		// JQuery在下载数据的时候，根据下载的数据，自动进行数据类型转换
		// 加入购物车设置id，id和当前按钮所在的【商品的id】相同。
					
		for(var i = 0; i < arr.length; i++){
   
			$(`<li class = 'goods_item'>
				<div class = 'goods_pic'>
					<img src="${
     arr[i].img}" alt="">
				</div>
				<div class = 'goods_title'>
					<p>【京东超市】奥利奥软点小草莓</p>
				</div>
				<div class = 'sc'>
					<div id = '${
     arr[i].id}' class = 'sc_btn'>加入购物车</div>
				</div>
			</li>`).appendTo($(".goods_box ul")); 
			// 【注】一定要时刻记住JQuery都是批量操作 
			//因为页面上有多个ul 所以要写清楚是哪个ul
		}
	},
	error: function(error){
   
		alert("请求错误" + error);
	}
})

然后添加点击事件，加入cookie的数据

// 在这里写是找不到按钮的，但是我们还想给按钮添加点击事件 采用事件委托
$(".goods_box ul").on("click", ".sc_btn", function(){
   
	// 点击按钮，通过this.id拿到当前购物车按钮对应商品的id
/*
	加入cookie的数据
	1、哪个商品加入购物车？这个商品的数量是多少？{id:id,num:1}
	2、购物车里面可以添加多个商品[{id:id,num:1},{id:id,num:1}]
	3、cookie只能存储纯字符串，只能存储json格式的字符串。
	键：goods
	值：[{id:id,num:1},{id:id,num:1}]
	过期时间：7
*/	 
	var id = this.id;

	// 1、判断是否是第一次添加商品
	var first = $.cookie("goods") == null ? true :