前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复 习一下所学的js，再敲这个的期间遇到了如下问题,1:子元素父元素的混乱使用，层次没了解清楚就上手写！2：类型转换的问题，其中结算部分的 ParesFloat和ParesInt以及.toFixed(2)的四舍五入,类型的把握，当然因为懒得弄，所以就直接写在了html里面，所以最好还是js文件独立出来，这样代码简洁，处理起来方便，好了废话不多说，上代码！

///js部分

<script type="text/javascript">
        $(function () {
            //绑定加号
            $(".plus").click(function () {
                var num = parseInt($(this).siblings(".num").text());//定义一个变量存储数字的增加
                $(this).siblings(".num").text(num + 1);//数字加
                calPrice()
               
            })
            //绑定减号
            $(".minus").click(function () {
                var num = parseInt($(this).siblings(".num").text())
                if (num == 1) return;
                $(this).siblings(".num").text(num - 1);
                calPrice()
            })
            //这个函数的意思就是说在增减函数上加一个点击事件，点击事件里面新建一个变量来存储增减的数字，
            //利用同级节点siblings来找到显示的框，然后找到后直接增减。
            //单个店铺全选功能  
            $(".shop-name input[type=checkbox]").click(function () {
                //找单个店铺单选后，应该继续加事件，当选中店铺总单选框后应该所有的店铺的单选框都被选中
                //此处应该先找他们共同的父亲然后再去找店铺里面用ul装着的单选框,然后进行判断，判断复选框是否被选中
                if ($(this).prop("checked")) {
                    $(this).parents(".shop-group-item").find("ul li input[type=checkbox]").prop("checked", true);
                }
                else {

                    $(this).parents(".shop-group-item").find("ul li input[type=checkbox]").prop("checked",false);

                }
                checkAllGod()
                calPrice()
            });
            //选中第一个影响到第二个店铺了
            //单个复选框事件
            $(".shop-info input[type=checkbox]").click(function () {
                //需求：当单个店铺内的所有复选框被选中则将店铺全选框选中，取消一个则取消店铺全选框的全选
                //需要获取选中的店铺的个数，需要获得没有选中店铺的个数，两个数量相等时则选中店铺复选框
                var goodNum = $(this).parents(".shop-group-item").find("ul li input[type=checkbox]").length;
                var goodSelect = $(this).parents(".shop-group-item").find("ul li input[type=checkbox]:checked").length;
                if (goodNum == goodSelect) {
                    $(this).parents(".shop-group-item").find(".shop-name input[type=checkbox]").prop("checked", true);
                }
                else {
                    $(this).parents(".shop-group-item").find(".shop-name input[type=checkbox]").prop("checked", false);
                }
                checkAllGod()
                calPrice()
            });
            //店铺总全选功能
            //需求：要求选中购物车全选按钮时所有的复选框全部都被选中，否则购物车全选按钮取消选中
            //建立一个判断函数，判断全选按钮的状态
            function checkAllGod() {
                var AllNum = $(".shop-group-item").length;
                var AllSelect = $(".shop-group-item .shop-name input[type=checkbox]:checked").length;
                if (AllNum ==AllSelect) {
                    $("#AllCheck").prop("checked", true);
                }
                else {

                    $("#AllCheck").prop("checked", false);
                }
            }//这个函数用来判断每一个店铺的复选框是否被选中从而选中最大的复选框
            //总店铺全选功能
            $("#AllCheck").click(function () {
                if ($(this).prop("checked")) {

                    $(".shop-group-item input[type=checkbox]").prop("checked", true);
                }
                else {

                    $(".shop-group-item input[type=checkbox]").prop("checked", false);
                }

            });
            //结算函数
            function calPrice() {
                //遍历商店
                //定义购物车总价变量
                var totaPrice = 0;
                $(".shop-group-item").each(function () {
                    //定义本店总计变量
                    var Shopprice = 0;
                    //开始遍历店铺内有多少商品
                    $(this).find("ul li input[type=checkbox]:checked").each(function () {
                        //建立商品单价变量 找到商品单价并做好类型转换赋值给变量
                        var shoppingrice = parseFloat($(this).siblings(".shop-info-text").find(".price").text());
                        //建立商品数量变量，找打数量并做好类型转换赋值给变量
                        var num = parseInt($(this).siblings(".shop-info-text").find(".num").text());
                        //店铺总计等于数量乘以单价,循环加
                        Shopprice += (shoppingrice * num);
                    });
                    //找到店铺总计显示出将金额赋值,并做好类型转换 toFixed()
                    $(this).find(".shopPrice span ").text(Shopprice.toFixed(2));
                    //计算购物车商品总价
                    totaPrice += Shopprice;
                });
                //将商品总价赋值
                $("#AllTotal").text(totaPrice);
            }
            //删除函数
            $(".coupons a").click(function () {
                $(".jd_win").show();
                $shop = $(this).parents(".shop-group-item");
            });
            //删除确认事件
            $(".submit").click(function () {
               
                //判断有哪些商品的的按钮被选中了，选中了调用remove方法
                //如果选中的是店铺按钮，则删除整个店铺
                if ($shop.find("div>input[type=checkbox]").prop("checked")) {
                    $shop.remove();
                }
                else {
                    //否则一列一列的删除
                    $shop.find("ul li input[type=checkbox]:checked").parents("li").remove();

                }

                $(".jd_win").hide();
                calPrice();

            });
            //删除取消事件
            $(".cancle").click(function () {
                $(".jd_win").hide();
            });
        });

    </script>

///js部分

///html部分

<!--头部开始-->
<div class="header">
    <h1>购物车</h1>
    <a href="#" class="back"><span></span></a>
    <a href="#" class=""></a>
</div>
<!--头部结束-->
<div class="shopping">
    
    <div class="shop-group-item">
        <div class="shop-name">
            <input type="checkbox" class="check goods-check shopCheck">
            <h4><a href="#">苹果专卖店</a></h4>
  
         <div
class="coupons"><span>领券</span><em>|</em><
span>编辑</span><em>|</em><span><a
href="#">删除</a></span></div>
        </div>
        <ul>
            <li>
                <div class="shop-info">
                    <input type="checkbox" class="check goods-check goodsCheck">
  
                 <div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
                    <div class="shop-info-text">
                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
  
                     <div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
                        <div class="shop-price">
                            <div class="shop-pices">￥<b class="price">100.00</b></div>
                            <div class="shop-arithmetic">
                                <a href="javascript:;" class="minus">-</a>
                                <span class="num" >1</span>
                                <a href="javascript:;" class="plus">+</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li><div class="shop-info">
                    <input type="checkbox" class="check goods-check goodsCheck">
  
                 <div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
                    <div class="shop-info-text">
                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
  
                     <div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
                        <div class="shop-price">
                            <div class="shop-pices">￥<b class="price">100.00</b></div>
                            <div class="shop-arithmetic">
                                <a href="javascript:;" class="minus">-</a>
                                <span class="num" >1</span>
                                <a href="javascript:;" class="plus">+</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="shop-info">
                    <input type="checkbox" class="check goods-check goodsCheck">
  
                 <div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
                    <div class="shop-info-text">
                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
  
                     <div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
                        <div class="shop-price">
                            <div class="shop-pices">￥<b class="price">100.00</b></div>
                            <div class="shop-arithmetic">
                                <a href="javascript:;" class="minus">-</a>
                                <span class="num" >1</span>
                                <a href="javascript:;" class="plus">+</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
    </div>
    
    <div class="shop-group-item">
        <div class="shop-name">
            <input type="checkbox" class="check goods-check shopCheck">
            <h4><a href="#">苹果专卖店</a></h4>
  
         <div
class="coupons"><span>领券</span><em>|</em><
span>编辑</span><em>|</em><span><a
href="#">删除</a></span></div>
        </div>
        <ul>
            <li>
                <div class="shop-info">
                    <input type="checkbox" class="check goods-check goodsCheck">
  
                 <div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
                    <div class="shop-info-text">
                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
  
                     <div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
                        <div class="shop-price">
                            <div class="shop-pices">￥<b class="price">100.00</b></div>
                            <div class="shop-arithmetic">
                                <a href="javascript:;" class="minus">-</a>
                                <span class="num" >1</span>
                                <a href="javascript:;" class="plus">+</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="shop-info">
                    <input type="checkbox" class="check goods-check goodsCheck">
  
                 <div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
                    <div class="shop-info-text">
                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
  
                     <div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
                        <div class="shop-price">
                            <div class="shop-pices">￥<b class="price">100.00</b></div>
                            <div class="shop-arithmetic">
                                <a href="javascript:;" class="minus">-</a>
                                <span class="num" >1</span>
                                <a href="javascript:;" class="plus">+</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
    </div>
</div>
<div class="payment-bar">
    <div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
    <div class="shop-total">
        <strong>总价：<i class="total" id="AllTotal">0.00</i></strong>
        <span>减免：123.00</span>
    </div>
    <a href="#" class="settlement">结算</a>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
<!--以下是遮罩层-->
<div class="jd_win">
    <div class="jd_win_box">
        <div class="jd_win_tit">你确定删除这些商品吗？</div>
        <div class="jd_btn clearfix">
            <a href="#" class="cancle f_left">取消</a>
            <a href="#" class="submit f_right">确定</a>
        </div>

    </div>
</div>
<!--遮罩层结束-->

///html部分

JQuery编写简易京东购物车功能的更多相关文章

  1. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  2. jQuery 复制节点的元素实现加入到购物车功能

    描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...

  3. jQuery 复制节点的元素实现添加到购物车功能

    描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...

  4. 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. 编写Java程序，应用客户端和服务端通过 Eclipse 控制台的输入和显示实现简易的聊天功能

    查看本章节 查看作业目录 需求说明: 应用客户端和服务端通过 Eclipse 控制台的输入和显示实现简易的聊天功能 实现思路: 创建 Java 项目,在项目中创建服务端类 ChatServerThre ...

  6. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  7. 再谈：jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  8. jquery ZeroClipboard实现黏贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. jquery编写插件

    jquery编写插件的方法    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...

随机推荐

  1. 命令行保存指定目录文件的名字（可包含文件夹文字）到txt文本文件

    Microsoft Visual Studio中配置OpenCV解决方案属性的时候, 需要将OpenCV的lib扩展名的库文件添加到属性的依赖列表里面,网上的有些人博客里面直接给出的会有问题(但大多数 ...

  2. 让你变懒的 Android Studio Live Templates

    俗话说.不想偷懒的程序猿不是好程序猿.那么今天就教大家偷懒下! 先举个样例.我们在 Android 开发中输入 Toast ,然后会有例如以下例如以下的高速操作: 是不是非常方便? 有同学问,这不就是 ...

  3. HDU 2298 Toxophily(公式/三分+二分)

    Toxophily Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. Xcode 7.0 官方免费的真机开发

    Xcode 7.0 官方免费的真机开发 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转 ...

  5. 【SqlServer系列】AS的用法

    1   概述 本篇文章简要分析,在SQL SERVER中,AS的基本用法. 2   具体分析 2.1  定义变量类型 )='Alan_beijing' 2.2 取别名 2.2.1 为结果集列取别名 c ...

  6. .net 裁剪图片（不压缩）

    命名空间: using System.Drawing; using System.Drawing.Imaging; /// <summary> /// 生成图片缩略文件 /// </ ...

  7. 为什么覆写equals()方法的时候总是要覆写hashcode()？

    要回答这个问题,我们应该先认识一下obj中的equals和hascode方法 1.equals()方法在obj中定义如下: public boolean equals(Object obj) { re ...

  8. JMeter接口HTTP请求implementation不选java会报错解决方法

    1.若不对c参数和d参数进行URL编码则需要选择implementation为java: 2.若想不设implementation值,则需进行c参数d参数URLEncoding import java ...

  9. Python Xcode搭建Python环境以及使用PyCharm CE

    pycharm CE下载   使用教程 1.基础学习网站 2.在Xcode7中搭建python开发环境,这个不行了就试试第二个,我是第二个可以正常输出了,第一个没有输出 3.Python学习-MAC下 ...

  10. 【Zookeeper】源码分析之Leader选举（一）

    一.前言 分析完了Zookeeper中的网络机制后,接着来分析Zookeeper中一个更为核心的模块,Leader选举. 二.总结框架图 对于Leader选举,其总体框架图如下图所示 说明: 选举的父 ...