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>& ...

随机推荐

【Luogu】【关卡2-2】交叉模拟（2017年10月）
任务说明:这里也是模拟,但是会混有些别的部分.思维难度不大,但是编写起来会有些难度.
Java对象什么时候可以被垃圾回收？JVM的永久代中会发生垃圾回收么？
当对象对当前使用这个对象的应用程序变得不可触及的时候,这个对象就可以被回收了.垃圾回收不会发生在永久代,如果永久代满了或者是超过了临界值,会触发完全垃圾回收(Full GC).如果你仔细查看垃圾收集器 ...
CSP 2019 模板整合
qwq以下都为9.24后写的模板 namespace IO{ const int S = 1 << 20; char I[S + 1], *Is = I, *It = I, O[S + 1 ...
bcpow — 任意精度数字的乘方
bcpow — 任意精度数字的乘方说明 string bcpow ( string $left_operand , string $right_operand [, int $scale ] ) 左 ...
分布式锁实现(一)：Redis
前言单机环境下我们可以通过JAVA的Synchronized和Lock来实现进程内部的锁,但是随着分布式应用和集群环境的出现,系统资源的竞争从单进程多线程的竞争变成了多进程的竞争,这时候就需要分布式 ...
input在输入中文时所触发的事件（防止输入中文时重复执行）
一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...
在IntelliJ IDEA中新建Maven项目
在IntelliJ IDEA中新建Maven项目,选择“File->New->Project”,创建一个简单项目,不选择模板,如下图所示: 2 选择“Maven”,不需要使用内置结构(模板 ...
【转】让应用程序支持emoji字符
什么是emoji?就是这些表情和符号:
Yii2 Composer
首先你必须得在本机配置token账号,里边涉及到一些git的用法,git的托管等等,具体方法如下: http://www.cnblogs.com/fnng/archive/2011/08/25/215 ...
谈html mailto(电子邮件)实际应用
大家知道,mailto是网页设计制作中的一个非常实用的html标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,当点击时就能自动打开当前计算机系统中默认的电子邮件客户端软件, ...

jq-demo-购物车

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

随机推荐

热门专题