前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复 习一下所学的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. 微信小程序去除button按钮的边框

    小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...

  2. OJ随笔——【1102-海明距离】——位运算

    题目如下: Description 海明距离是在指二进制情况下,一个整数变成另外一个整数需要翻转的位数.比如2转换到3需要翻转1位,所以2到3的海明距离是1.给你两个正整数x和y,(x,y<=1 ...

  3. Chrome development tools学习笔记(5)

    调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ...

  4. AndroidStudio下gradle的入门介绍与使用

    參考: 网易云加密:http://apk.aq.163.com 网易云捕:http://crash.163.com 1 Groovy Groovy 是没有类型的 Java 代码 ,语法更简洁.形式有点 ...

  5. 基于Office 365的随需应变业务应用平台

    作者:陈希章 发表于 2017年9月7日 这是我去年10月底在微软技术大会(Microsoft Ignite 2016) 上面的演讲主题,承蒙大家抬爱,也沾了前一场明星讲师的光,我记得会场几乎是满座. ...

  6. MyBatis SQL处理大于、小于号

    MyBatis mapper文件是xml文件,需要特殊字符如大于号.小于号后需要转义. 原字符 转义后字符 < < <= <= > > > >=

  7. windows 下使用VMware Workstation Pro 工具，ubuntu创建虚拟机

    本文记录windows 下使用VMware Workstation Pro 工具,ubuntu创建虚拟机 的步骤 第一步 [文件] --- [新建虚拟机]   第二步 弹出的新建虚拟机向导对话框 标准 ...

  8. 主次设备号 Device Major and Minor Numbers

    对于一个设备文件而言真正重要的标志是它的主次设备号(major and minor device numbers).如果我们用ls命令列出/dev下的一个设备: frank@under:~$ ls - ...

  9. 如何正确使用javah

    bogon:src zexu$ javah -jni -classpath /Users/zexu/github/ijkplayer/android/ijkplayer/ijkplayer-java/ ...

  10. JMeter循环控制器循环次数使用变量控制注意事项

    1.进入循环控制器之前变量要有值: 2.BeanShell处理文件,读取行数,赋值给变量,要有相应的Sampler,不然脚本不会运行. 对于单个线程来说,假如设置了循环2次,线程启动后,运行结束,此时 ...