今天,主要来说一下如何通过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 :