通过JQuery实现购物车的效果

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

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

// 1、通过ajax来进行请求
$.ajax({
	url: "data.json",
	success: function(arr){
		// JQuery在下载数据的时候,根据下载的数据,自动进行数据类型转换
		// 加入购物车设置id,id和当前按钮所在的【商品的id】相同。
					
		for(var i = 0; i < arr.length; i++){
			$(`
  • ${arr[i].img}" alt="">

    【京东超市】奥利奥软点小草莓

    加入购物车
  • `
    ).appendTo($(".goods_box ul")); // 【注】一定要时刻记住JQuery都是批量操作 //因为页面上有多个ul 所以要写清楚是哪个ul } }, error: function(error){ alert("请求错误" + error); } })

    然后添加点击事件,加入cookie的数据
    通过JQuery实现购物车的效果_第1张图片

    // 在这里写是找不到按钮的,但是我们还想给按钮添加点击事件 采用事件委托
    $(".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 : false;
    	if(first){  // 是第一次添加商品
    		// 设置键和值 name=value goods=[{id:id,num:1},{id:id,num:1}]
    		$.cookie("goods", `[{id:${id},num:1}]`, {
    			expires: 7  //设置过期时间为7天
    		})
    	}else{  //不是第一次添加商品
    		// 2、判断之前是否添加过
    		var cookieStr = $.cookie("goods");
    		var cookieArr = eval(cookieStr); //将外层是数组,里层是对象的cookieStr转化成字符串
    
    		var same = false; //假设之前没有添加过
    
    		// 通过循环判断是否添加过该商品
    		for(var i = 0; i < cookieArr.length; i++){
    			if(cookieArr[i].id == id){
    				cookieArr[i].num++; //已经添加过该商品,数量加1
    				same = true; //添加过
    				break;
    			}
    		}
    
    		// 3、之前没有添加过
    		if(!same){
    			var obj = {id: id, num: 1}; //新建一个对象
    			cookieArr.push(obj); //将新建的对象插入到cookieArr中
    		}
    
    		// 把cookieArr重新存回去
    		$.cookie("goods", JSON.stringify(cookieArr), {
    			expires: 7
    		});
    	}
    	// alert($.cookie("goods"));
    				  
    		sc_num();  //这个函数是计算购物车里商品的数量,随后说
    })
    

    然后,添加购物车的移入和移出

    
    			$(".sc_right").mouseenter(function(){
    				sc_msg(); //这是查看添加到购物车的商品
    				$(this).stop().animate({
    					right: 0
    				})
    			})
    
    			$(".sc_right").mouseleave(function(){
    				$(this).stop().animate({
    					right: -270
    				})
    			})
    

    之后,说一下前面调用的两个函数,首先是——查看添加到购物车的商品。

    // 查看添加到购物车的商品
    function sc_msg(){
    	/*
    		1、cookie  {id:id,num:1}
    		2、加载购物车的时候,需要该商品的所有信息
    	*/
    				
    	// 清除该节点下所有的子辈节点
    	$(".sc_right ul").empty();
    				
    	$.ajax({
    		url: "data.json",
    		success: function(arr){
    			//需要在所有的商品中,将加入购物车中的商品取出
    			if($.cookie("goods")){ //如果购物车中存在商品
    				var cookieArr = eval($.cookie("goods")); 
    				//将购物车中的商品取出来然后通过eval转成对应的数组
    				var goodsArr = [];  //记录加入购物车所有商品的数据
    
    				for(var i = 0; i < arr.length; i++){ //先将所有的商品信息遍历一遍
    					for(var j = 0; j < cookieArr.length; j++){ //将加在购物车里的商品遍历一遍
    						if(arr[i].id == cookieArr[j].id){
    							//添加商品的数量
    							arr[i].num = cookieArr[j].num;
    							goodsArr.push(arr[i]);
    						}
    					}
    				}
    
    				// 添加到购物车里面的所有的商品信息和商品数量全都拿到了
    				for(var i = 0; i < goodsArr.length; i++){
    					// 通过循环将数据添加到页面上
    					$(`
  • ${goodsArr[i].img}" alt="">

    这是商品曲奇饼干

    购买
    商品数量:${goodsArr[i].num}
  • `
    ).appendTo($(".sc_right ul")); } } }, error:function(error){ console.log("请求错误:" + error); } }) }

    最后,再看一下如何计算购物车里商品的数量。这个函数在页面刚加载的时候也调用一次。

    // 计算购物车里商品的数量
    function sc_num(){
    	if($.cookie("goods")){
    		var cookieArr = eval($.cookie("goods"));  
    		//将购物车中的商品取出来然后通过eval转成对应的数组
    		var sum = 0;  //用来记录累加的和
    		// 求和
    		for(var i = 0; i < cookieArr.length; i++){
    			sum += cookieArr[i].num;
    		}
    		$(".sc_right .sc_num").html(sum); //将求得的和显示出来
    	}
    }
    

    css样式在此处就不多赘述了,页面框架如下:

    <body>
    
    	<div class="goods_box">
    		
    		<ul>
    			
    			
    		ul>
    
    	div>
    
    
    	<div class="sc_right">
    		<div class="sc_pic">
    			
    			<div class="sc_num">
    				0
    			div>
    		div>
    
    		<ul>
    			
    		ul>
    	div>
    	
    body>
    

    好啦,以上就是今天说的全部的通过JQuery实现购物车的效果,至于抛物线,篇幅有限,下篇介绍。

    你可能感兴趣的:(JQuery,购物车,前端)