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

随机推荐

2018-8-10-win10-UWP-button
title author date CreateTime categories win10 UWP button lindexi 2018-08-10 19:16:53 +0800 2018-2-13 ...
正规式α向有限自动机M的转换
[注:这一节是在学习东南大学廖力老师的公开课时,所记录的一些知识点截屏,谢谢廖力老师的辛劳付出] 引入3条正规式分裂规则来分裂α,所得到的是NFA M(因为包含ε弧,之后进行确定化就是所需要求得DF ...
jQuery与Vue的区别、从jQuery到Vue框架优点总结
一.两者的区别 1.数据与视图分离 2.数据驱动视图二.从jQuery到Vue框架的总结 1.数据与视图分离,解耦 2.数据驱动视图,只关心数据,DOM操作已经被框架封装
ES6常用点
原文 http://es6.ruanyifeng.com/#docs 变量--------------------------------------------- 1.let声明.const声 ...
Unity Document
{ https://docs.unity3d.com/ScriptReference/Events.UnityEventTools.html }
【命令】GETBIT/SETBIT
我们在登陆某些博客网站或者视频网站的时候,网站往往会记录我们是否阅读了某篇文章,或者是观看了某个视频. 如果用传统的mysql数据库实现,如果用户数量多,文章和视频也多的情况下,那么则会给数据库带来很 ...
【操作】Linux快捷键
阿里云高磊：API网关加速能力聚合与生态集成
导读:本文中,阿里云高级技术专家高磊(花名:埃兰)将聚焦API网关加速能力聚合与生态集成,讲述API如何实现系统间的衔接和API网关的产品升级进程,重点展示了一些新功能.新体验和新变化. 大家下午好, ...
QT之sqlite连接
啥也没做,按说明直接啪啪写一堆代码 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); //open datebase ...
Android中自己定义一个shade.xml
自己定义一个shade: <shape>  <solid android:color="#ff9d77"/> <!- ...

jq-demo-购物车

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

随机推荐

热门专题