jq-demo-购物车

首页

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             ul, li {list-style: none;}

             li {

                 width: 100px;

                 height: 230px;

                 border: 1px solid gray;

                 float: left;

                 margin-left: 10px;

                 cursor: pointer;

             }

             li img {

                 width: 100px;

                 height: 100px;

             }

         </style>

         <script src="js/jquery-1.12.3.js"></script>

         <script src="js/jquery.cookie.js"></script>

         <script>

             $(function(){

                 //保存从json中获取到的商品数据

                 var myArr = [];

                 //添加点击事件

                 $("#list").on("click", "li", function(){

                     //console.log(11);

                     //index

                     var index = $(this).index();

                     //点击的商品的id

                     var id = myArr[index].id;

                     //console.log(id);

                     //进入详情页

                     location.href = "03_detail.html?id=" + id;

                 })

                 //使用Ajax获取商品数据

                 $.get("json/goods.json", function(responseData){

                     //console.log(responseData.data);

                     var arr = responseData.data;

                     myArr = arr;

                     //遍历arr

                     for (var i=0; i<arr.length; i++){

                         var obj = arr[i]; //每个商品的数据

                         //创建li节点

                         var li = $("<li></li>").appendTo("#list");

                         $("<img src="+ obj.img +" />").appendTo(li); //图片

                         $("<p>"+ obj.name +"</p>").appendTo(li); //名称

                         $("<p>"+ obj.unit + obj.price +"</p>").appendTo(li); //价格

                         $("<a href='#'>加入购物车</a>").appendTo(li); //

                     }

                 })

                 //使用ajax获取商品数据方法2

 //                $.get("json/goods.json", function(data) {

 //                    console.log(data);

 //                    console.log(data.data);

 //                    var arr = data.data;

 //

 //                    myArr = arr;

 //                    var liHtml = "";

 //                    for(var i=0; i<arr.length; i++){

 //                        liHtml += `<li>

 //                                        <img src=${arr[i].img}/>

 //                                        <p>${arr[i].name}</p>

 //                                        <p>${arr[i].price}</p>

 //                                        <a href='#'>加入购物车</a>

 //                                    </li>`;

 //                        $("#list").html(liHtml);

 //                    }

                 //加入购物车

                 $("#list").on("click", "a", function(e){

                     e.stopPropagation();

                     //console.log(11);

                     var index = $(this).index("a");

                     //console.log(index);

                     //当前要加入购物车的商品信息

                     var obj = myArr[index];

                     var arr = $.cookie("cart") ? JSON.parse($.cookie("cart")) : [];

                     var isExist = false;

                     for (var i=0; i<arr.length; i++){

                         if (arr[i].id == obj.id) {

                             arr[i].num++;

                             isExist = true;

                         }

                     }

                     if (!isExist) {

                         obj.num = 1;

                         obj.checked = true; //是否选中该商品

                         arr.push(obj);

                     }

                     $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                     console.log( $.cookie("cart") )

                 })

                 $("#gotoCart").click(function(){

                     location.href = "05_myCart.html";

                 })

             })

         </script>

     </head>

     <body>

         <button id="gotoCart">结算</button>

         <ul id="list">

             <!--<li>

                 <img src="data:images/1.jpg" />

                 <p>单车</p>

                 <p>1000</p>

             </li>

             <li>

                 <img src="data:images/2.jpg" />

                 <p>摩托</p>

                 <p>10000</p>

             </li>

             <li>

                 <img src="data:images/b1.jpg" />

                 <p>汽车</p>

                 <p>100000</p>

             </li>

             <li>

                 <img src="data:images/b2.jpg" />

                 <p>飞机</p>

                 <p>1000000</p>

             </li>-->

         </ul>

     </body>

 </html>

详情页

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/jquery-1.12.3.js"></script>

        <script>

            $(function(){

                //获取id值方法1

                //?id=101

                var id = location.search.slice(4);

                console.log(location.search)

                console.log(id); //

                //获取id值方法2

//                var strUrl = window.location.toString();

//                console.log(strUrl);

//                var id = strUrl .substr(strUrl .lastIndexOf("id")+3,strUrl .length-strUrl .lastIndexOf("id="));

//                console.log(id);//101

                //获取id值方法2

//                var id;

//                var reg = new RegExp("(^|&)id=([^&]*)(&|$)");

//                var r = window.location.search.substr(1).match(reg);

//                console.log(r);

//                if(r&&r.length>2){

//                    //escape() 来编码字符串，然后使用 unescape() 对其解码

//                    id = unescape(r[2]);

//                }

//                console.log(id);//101

                $.get("json/goods.json", function(data){

                    var arr = data.data;

                    console.log(arr);

                    for(var i=0; i<arr.length; i++){

                        var boxHtml = '';

                        if(id == arr[i].id){

                            boxHtml = `    <img src=${arr[i].img} />

                                        <p>${arr[i].name}</p>

                                        <p>${arr[i].price}</p>`

                            $("#box").html(boxHtml);

                        }

                    }

                })

                //方法2

//                $.get("json/goods.json", function(reponseData){

//                    var arr = reponseData.data;

//                    for (var i=0; i<arr.length; i++){

//                        var obj = arr[i];

//                        if (id == obj.id){

//                            //console.log(obj.name);

//                            //console.log(obj.price);

//

//                            //此时的obj就是当前商品的信息

//                            fn(obj);

//                        }

//                    }

//                });

//

//                function fn(obj){

//                    $("#box img").attr("src", obj.img);

//                    $("#box .name").html( obj.name );

//                    $("#box .price").html( obj.unit + obj.price );

//                }

            })

        </script>

    </head>

    <body>

        <h3>商品详情</h3>

        <div id="box">

            <img src="" />

            <p class="name"></p>

            <p class="price"></p>

        </div>

    </body>

</html>

购物车页

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            ul, li {list-style: none;}

            img {

                width: 40px;

                height: 30px;

            }

            .num {

                width: 40px; text-align: center;

            }

        </style>

        <script src="js/jquery-1.12.3.js"></script>

        <script src="js/jquery.cookie.js"></script>

        <script>

            $(function(){

                //刷新

                refresh();

                function refresh(){

                    //从cookie中获取购物车的数据

                    var arr = $.cookie("cart");

                    if (arr){

                        arr = JSON.parse(arr);

                        /*

                         * [

                         *    {"id":101,"name":"单车","price":1000,"unit":"￥","img":"images/1.jpg","num":2},

                         *    {"id":102,"name":"摩托","price":10000,"unit":"￥","img":"images/2.jpg","num":1}

                         * ]

                         */

                        //先清空旧li节点

                        $("#list").empty();

                        //添加新的li节点

                        var total = 0; //总价

                        //遍历arr

                        for (var i=0; i<arr.length; i++){

                            var obj = arr[i]; //每个商品信息

                            //创建li节点

                            var li = $("<li></li>").appendTo("#list");

                            if (obj.checked == true) {

                                $("<input class='check' type='checkbox' checked='checked' />").appendTo(li); //复选框选中

                            }else {

                                $("<input class='check' type='checkbox' />").appendTo(li); //复选框未选中

                            }

                            $("<img src="+ obj.img +" />").appendTo(li); //图片

                            $("<span>"+ obj.name +"</span>").appendTo(li); //商品名称

                            $("<span>"+ obj.unit+ obj.price +"</span>").appendTo(li); //商品价格

                            $("<input class='sub' type='button' value='-' />").appendTo(li); //-

                            $("<input class='num' type='text' value="+ obj.num +" />").appendTo(li); //商品数量

                            $("<input class='add' type='button' value='+' />").appendTo(li); //+

                            $("<a class='del' href='#'>删除</a>").appendTo(li); //+

                            //如果当前商品选中了

                            if (obj.checked == true){

                                total += obj.price * obj.num;

                            }

                        }

                        //console.log(total);

                        $("#totalPrice").html( "￥" + total);

                    }

                    else {

                        console.log("购物车中没有数据");

                    }

                }

                //删除

                $("#list").on("click", ".del", function(){

                    //console.log("删除");

                    var index = $(this).index(".del");

                    //console.log(index);

                    //1,修改cookie

                    var arr = JSON.parse($.cookie("cart"));

                    arr.splice(index, 1); //删除arr的第index个元素

                    $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                    //2,调用refresh()

                    isCheckAll();

                    refresh();

                })

                //+

                $("#list").on("click", ".add", function(){

                    var index = $(this).index(".add");

                    var arr = JSON.parse($.cookie("cart"));

                    arr[index].num++;

                    $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                    refresh();

                })

                //-

                $("#list").on("click", ".sub", function(){

                    var index = $(this).index(".sub");

                    var arr = JSON.parse($.cookie("cart"));

                    arr[index].num--;

                    if (arr[index].num <= 0){

                        arr[index].num = 1;

                    }

                    $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                    refresh();

                })

                //勾选/取消勾选

                $("#list").on("click", ".check", function(){

                    var index = $(this).index(".check");

                    var arr = JSON.parse($.cookie("cart"));

                    arr[index].checked = !arr[index].checked;

                    $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                    isCheckAll();

                    refresh();

                })

                //点击全选

                $("#checkAll").click(function(){

                    //console.log($(this).prop("checked"));

                    var arr = JSON.parse($.cookie("cart"));

                    $.each(arr, function(i) {

                        if ( $("#checkAll").prop("checked") ){//全选

                            arr[i].checked = true;

                        }

                        else { //取消全选

                            arr[i].checked = false;

                        }

                    });

                    $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                    refresh();

                })

                //判断是否全选

                //在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。

                isCheckAll();

                function isCheckAll(){

                    var arr = JSON.parse($.cookie("cart"));

                    var sum = 0;

                    for (var i=0; i<arr.length; i++){

                        sum += arr[i].checked;

                    }

                    if (arr.length == 0) {

                        $("#checkAll").prop("checked", false);

                    }

                    else if (sum == arr.length) { //全选

                        $("#checkAll").prop("checked", true);

                    }

                    else { //未全选

                        $("#checkAll").prop("checked", false);

                    }

                }

                //删除选中

                $("#delSelect").click(function(){

                    /*

                    var arr = JSON.parse($.cookie("cart"));

                    for (var i=arr.length-1; i>=0; i--){

                        if (arr[i].checked == true){

                            arr.splice(i, 1);

                        }

                    }

                    $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});

                    */

                    var arr = JSON.parse($.cookie("cart"));

                    var newArr = [];

                    for (var i=0; i<arr.length; i++){

                        if (arr[i].checked == false){

                            newArr.push(arr[i]);

                        }

                    }

                    $.cookie("cart", JSON.stringify(newArr), {expires:30, path:"/"});

                    isCheckAll();

                    refresh();

                })

            })

        </script>

    </head>

    <body>

        <h2>我的购物车</h2>

        全选<input id="checkAll" type="checkbox" checked="checked" />

        <ul id="list">

            <!--<li>

                <input type="checkbox" />

                <img src="data:images/1.jpg" />

                <span>单车</span>

                <span>$1000</span>

                <input type="button" value="-" />

                <input class="num" type="text" value="1" />

                <input type="button" value="+" />

                <a href="#">删除</a>

            </li>

            <li>

                <input type="checkbox" />

                <img src="data:images/1.jpg" />

                <span>单车</span>

                <span>$1000</span>

                <input type="button" value="-" />

                <input class="num" type="text" value="1" />

                <input type="button" value="+" />

                <a href="#">删除</a>

            </li>-->

        </ul>

        <a id="delSelect" href="#">删除选中</a>

        <div>总价： <span id="totalPrice">0</span></div>

    </body>

</html>

jq-demo-购物车的更多相关文章

jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
JQ实现购物车全选跟总计全选
//GoodsCheck购物车每个店铺的checkBox//goods-check购物车所有的checkBox//ShopCheck店铺全选的按钮//commlistFrm店铺商品的模块//allCh ...
jq demo 简单的图片懒加载效果
重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...
jq demo 点击弹窗，居中，可滚动，可拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jq demo 点击评分组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jq demo 九宫格抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
jq demo 点击选中元素左右移动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
jq 简易购物车功能实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

随机推荐

前端移动端开发总结(Vue)
上下固定,中间滚动布局(FLEX) <div id="app"> <div class="header"></div> &l ...
2016计蒜之道复赛百度地图的实时路况分治+Floyd
题目链接:https://nanti.jisuanke.com/t/A1108 这道题还挺有意思的.让我对Floyd的了解又加深了一点. 首先我们重新审视Floyd这三重循环到底有什么用?第一层是枚举 ...
winpe
winpe winpe winpe 工具判断是否pe系统的方法:GetSystemDisk()
SQL 在表中插入
SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新记录. SQL ...
NOIP2019模拟2019.9.20】膜拜大会（外向树容斥，分类讨论）
传送门. 题解: 我果然是不擅长分类讨论,心态被搞崩了. 注意到\(m<=n-2\),意味着除了1以外的位置不可能被加到a[1]两遍. 先考虑个大概: 考虑若存在\(x,x-1,-,2\)(有序 ...
delphi 内存映射
使用内存映射文件读写大文件使用内存映射文件读写大文件文件操作是应用程序最为基本的功能之一,Win32 API和MFC均提供有支持文件处理的函数和类.一般来说,这些函数可以满足大多数场合的要求,但是 ...
selenium工作的大概原理
selenium的原理是什么? selenium的原理涉及到3个部分,分别是浏览器 driver: 一般我们都会下载driver client: 也就是我们写的代码 client其实并不知道浏览器是 ...
Linux 线程Demo
#include <stdio.h> #include <pthread.h> struct char_print_params { char character; int c ...
JMeter轻松实现大数据量AI图像识别接口测试
****************************************************************************** 本文主要介绍利用Jmeter进行AI图像识 ...
Django框架（十三）—— Djang与Ajax
目录 Djang与Ajax 一.什么是Ajax 二.Ajax的特点 1.异步 2.局部刷新三.Ajax优点四. 基于jquery的Ajax使用 1.基本语法 2.完整使用语法 3.利用ajax提交 ...

jq-demo-购物车

jq-demo-购物车的更多相关文章

随机推荐

热门专题