简易购物车(jquery)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type = "text/javascript" src="jquery-1.11.3.js"></script>
    <script type = "text/javascript" src="jquery.cookie.js"></script>
    <script type = 'text/javascript' src = 'parabola.js'></script>
	<script>
		$(function(){
   

            sc_num();
            sc_msg();

            $.ajax({
   
                url: "data.json",
                // dataType: "json",  
                success: function(arr){
   
                    
                    // alert(arr); 下载到的数据,是已经解析完成的数据
                    for(var i = 0; i < arr.length; i++){
   
                        var node =  $(`
  • ${ arr[i].img}" alt=""/>

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

    加入购物车
  • `
    ); node.appendTo(".goods_box ul"); //【注】JQ中所有的操作都是批量操作。 //【注】ajax下载数据,加载页面是异步操作, } }, error: function(msg){ console.log(msg); } }) //事件委托 $(".goods_box ul").on("click", ".sc_btn", function(){ ballMove(this); //加入购物车按钮所在商品的,商品id /* cookie里面存储购物车的数据 1、cookie大小有限制 只存储商品的id和商品数量 2、cookie只能存储字符 将数据结构转成json格式字符串在进行存储 [{id:1,num:2},{id:3,num1}]; 考虑cookie存储的流程 */ var id = this.id; var first = $.cookie("goods") == null ? true : false; if(first){ //第一次添加 // $.cookie("goods", `[{"id":${id},"num":1}]`); var arr = [{ id: id, num:1}]; $.cookie("goods", JSON.stringify(arr), { expires: 7 }) }else{ //如果不是第一次添加,判断之前是否添加过 var cookieStr = $.cookie("goods"); var cookieArr = JSON.parse(cookieStr); var same = false; //假设没有添加过该商品 //通过循环,去判断是否有符合条件的元素 for(var i = 0; i < cookieArr.length; i++){ if(id == cookieArr[i].id){ same = true; cookieArr[i].num++; break; } } if(!same){ cookieArr.push({ id:id, num: 1}); } //将数据存回cookie $.cookie("goods", JSON.stringify(cookieArr),

    你可能感兴趣的:(jquery,JavaScript)