使用jQuery模拟京东购物车

站长

2023年01月06日 04:49 · 阅读数 88

使用jQuery模拟京东购物车（主要分析js逻辑原理）

一、思路分析(文章末尾附：源码)

开发一个小项目的基本步骤：

第一步：功能分析

页面初始化：

1.1 商品总数

1.2 已选的商品数量

1.3 初始化cartBody

1.4 价格：小计、总价

1.5 勾选状态初始化

全选

2.1 当用户点击全选框的时候，处理全选逻辑

2.2 获取所有全选和行选择框

2.3 全选勾上，行选择框都勾上，全选框不勾上，行选择框不全部勾上

2.4所有行都勾上，全选框勾上

删除功能

3.1 获取删除按钮和删除所有的按钮

3.2 点击行删除按钮，删除当前行

3.3 点击删除所有按钮，根据已经勾选的行选择框，找到item进行删除

事件委托

4.1 给cart添加点击事件，通过事件源对象区分不同的按钮区分不同按钮给与不同的业务逻辑

需要实现的效果（gif图）：

使用jQuery模拟京东购物车

第二部：初始化全局变量

可能有一些初始化全局变量暂时想不到，这没关系，把尽量多感觉能使用的全局变量定义好，没有定义的在之后定义

let cart = $('#cart'); // 用于事件委托
let cartTbody = $('.cart-tbody');//网页主题
let numberTop = $('.number'); //顶部商品数量
let selectItems = $('.amount-sum em'); //已选商品数量
let totalPrice = $('.total-price em');  //商品总价
let inputNum = null; // 单件商品数量输入框
let currentCount = -1; // 当进入单个商品输入框是，单个商品输入输入框的输入数量

第三步：项目初始化工作

使用立即执行函数加载页面需要的数据
通过封装init（）函数，把加载的数据关联到网页中

// 立即执行函数加载页面数据
var lzq = (function () {
    var goods = [{
        shop: {
            title: "美家星京东家具自营旗舰店",
            link: "https://item.jd.com/8814349.html",
        },
        good: {
            id: 1,
            imgUrl: 'https://img20.360buyimg.com/n0/s80x80_jfs/t1/135815/14/21629/311109/620620d7Eb9bfa429/8700f5632a208a26.jpg.dpg',
            info: "美家星 简易衣柜布衣柜卧室超稳大号非实木单人双人简易组装布衣橱加粗钢",
            num: 1,
            price: 99,
            link: "https://item.jd.com/8814349.html"
        }
    },
    {
        shop: {
            title: "南恩生活电器专营店",
            link: "https://mall.jd.com/index-915027.html",
        },
        good: {
            id: 2,
            imgUrl: 'https://img13.360buyimg.com/n0/s80x80_jfs/t1/166886/18/25547/753680/62b9040cE563f51e9/910391007d9918ca.png!q70.jpg',
            info: "小米有品 迷你内裤内衣洗衣机小型婴儿波轮洗衣机儿童宝宝洗袜子机无线充",
            price: 338,
            num: 1,
            link: "https://item.jd.com/10055039798646.html"
        }
    },
    {
        shop: {
            title: "HUWI旗舰店",
            link: "https://mall.jd.com/index-11749107.html",
        },
        good: {
            id: 3,
            imgUrl: 'https://img11.360buyimg.com/n0/s80x80_jfs/t1/126607/39/27266/224156/624eb0d8E2eefa105/3a60a4c1e2ef71eb.jpg.dpg',
            info: "HUWI 国行【2022款英特尔可选酷睿】金属笔记本电脑轻薄本大学生上网",
            price: 2788,
            num: 1,
            link: "https://item.jd.com/10043598885664.html"
        }
    },
    {
        shop: {
            title: "苏泊尔京东自营旗舰店",
            link: "https://mall.jd.com/index-1000001228.html",
        },
        good: {
            id: 4,
            imgUrl: 'https://img10.360buyimg.com/n0/s80x80_jfs/t1/102090/33/26127/115424/63131961Ee57c91e2/da360fe968feef56.jpg.dpg',
            info: "苏泊尔（SUPOR） 即热式饮水机家用 过滤母婴台式直饮机净水",
            price: 1599,
            num: 1,
            link: "https://item.jd.com/100038062656.html"
        }
    }

    ];
    return goods;
})();

init();


// 使用模板字符串进行页面初始化
function init() {
    for (let i = 0; i < lzq.length; i++) {
        let shopTitle = lzq[i].shop.title;
        let shopLink = lzq[i].shop.link;
        let goodImgUrl = lzq[i].good.imgUrl;
        let goodInfo = lzq[i].good.info;
        let goodPrice = lzq[i].good.price;
        let goodLink = lzq[i].good.link;
        let goodNum = lzq[i].good.num;
        let sumGoodsPrice = parseInt(goodPrice * goodNum).toFixed(2); // 总价保留两位小数
        let module = `<div class="shop">
        <span class="shop-text">
            <a href="${shopLink}" target="_blank">${shopTitle}</a><i class="ml5"></i>
        </span>
    </div>
    <div class="item-form">
        <div class="cell p-checkbox">
            <input type="checkbox" class="checkbox">
        </div>
        <div class="cell p-goods">
            <div class="p-img">
                <a href="${goodLink}" target="_blank">
                    <img src="${goodImgUrl}" alt="">
                </a>
            </div>
            <div class="p-msg">
                <div class="p-name">
                    <a href="${shopLink}" target="_blank">${goodInfo}</a>
                </div>
            </div>
        </div>
        <div class="cell p-price">
            <span class="p-price-cont">￥${goodPrice}</span>
        </div>
        <div class="cell cart-number quantity">
            <button class="cart-number-dec">-</button>
            <input type="number" class="cart-number-input" value="1">
            <button class="cart-number-inc">+</button>
        </div>
        <div class="p-sum">
            <strong>￥${sumGoodsPrice}</strong>
        </div>
        <div class="cell p-ops">
            <a href="javascript:void(0);" class="delete-row">删除</a>
        </div>
    </div>`;

        // 将页面主题appendchild cartTbody中
        let cartTbodyItem = document.createElement('div');
        cartTbodyItem.className = 'cart-tbody-item';
        cartTbodyItem.innerHTML = module;
        cartTbody[0].appendChild(cartTbodyItem);
    }

    numberTop[0].innerHTML = lzq.length;
    selectItems[0].innerHTML = 0;
    totalPrice[0].innerHTML = '￥' + '0.00';
    inputNum = $('.cart-number-input');
}

第四步：根据功能分析进行项目功能的实现

事件委托，直接获取整个大盒子cart，通过点击不同的事件源处理不同的结果

// 事件委托
cart[0].onclick = function (e) {
    const event = e || window.event;
    const sourceEle = event.target || event.srcElement;  // 返回触发的事件
    const temp = sourceEle.className; // 根据类名获取匹配的元素

    switch (temp) {
        case "checkbox-all":
            // 让所有复选框和当前点击全选的按钮保持一致
            // prop 设置或返回被选元素的属性和值
            $('.checkbox').prop('checked', $(sourceEle).prop('checked'));
            // 使另一个全选按钮与当前点击的全选按钮保持一致
            $('.checkbox-all').prop('checked', $(sourceEle).prop('checked'));
            // 为全选的商品添加背景颜色,取消全选去除所有背景颜色
            if ($(sourceEle).prop('checked')) {
                $('.checkbox').parents('.item-form').addClass('show');
            } else {
                $('.checkbox').parents('.item-form').removeClass('show');
            }

            //  更新已选商品的数量和价格
            getSelectedItems();
            getSum()

            break;
        case 'checkbox':
            if ($(sourceEle).prop('checked')) {

                // '.checkbox' 不能用类名更改,因为所有商品的类名相同要通过当前点击事件 sourceEle来更改样式
                $(sourceEle).parents('.item-form').addClass('show');
            } else {
                $(sourceEle).parents('.item-form').removeClass('show');
            }
            // 判断是否符合全选按钮的条件
            if ($('.checkbox:checked').length == $('.checkbox').length) {
                $('.checkbox-all').prop('checked', true);
            } else {
                $('.checkbox-all').prop('checked', false);
            }

            // 更新商品数量和价格
            getSelectedItems();
            getSum();
            break;
        // 删除
        case 'delete-row':
            var result = DialogMessage("确定移除商品？");
            if (result) {
                $(sourceEle).parents('.cart-tbody-item').remove();
                flush();// 刷新
            }
            break;
        case 'delete-all':
            if ($('.checkbox-all').prop('checked')) {
                cartTbody[0].innerHTML = '';
                flush();
            } else {
                $('.checkbox:checked').parents('.cart-tbody-item').remove();
                flush();
            }
            break;
        // 增加商品:数量改变，单价也要跟着改变，获取单价和数量的值
        case 'cart-number-inc':
            let currentNum = $(sourceEle).siblings('.cart-number-input');
            let currentPrice = $(sourceEle).parent().siblings('.p-price').children('span');
            let sumPrice = $(sourceEle).parent().siblings('.p-sum').children('strong'); // 总价格

            // 设置商品上限
            if (currentNum == 99) {
                alert('商品已经添加上限，请购买后在添加！')
                return;
            }
            console.log(currentPrice.html().substr(1)); //substr(1) 获取 ￥99 中的￥后面的数字

            currentNum.val(parseInt(currentNum.val()) + 1);
            sumPrice.html('￥' + (currentNum.val() * (currentPrice.html().substr(1))).toFixed(2));
            getSum();
            break;
        case 'cart-number-dec':
            let currentNumDown = $(sourceEle).siblings('.cart-number-input');
            let currentPriceDown = $(sourceEle).siblings('.p-price').children('span');
            let sumPriceDown = $(sourceEle).parent().siblings('.p-sum').children('strong');
            if (currentNumDown.val() == 1) {
                var result = DialogMessage('确定移除商品？');
                if (result) {
                    $(sourceEle).parents('.cart-tbody-item').remove();
                    flush();
                }
                return;
            }
            // 商品-1计算价格和商品数量
            currentNumDown.val(parseInt(currentNumDown.val()) - 1);
            sumPriceDown.html('￥' + ((currentPriceDown.html().substr(1)) * currentNumDown.val()).toFixed(2));
            getSum()
            break;
        default:
            break;

    }
}

事件委托中有一些我觉得比较绕的地方，单独拿出来进行分析，以及好用的一些方法

方法1：prop()方法：
        1. 返回属性的值：          $(selector).prop(property)
        2.设置属性和值：           $(selector).prop(property,value)
购物车项目使用的是设置属性的值：
            $('.checkbox').prop('checked', $(sourceEle).prop('checked'));
            // 使另一个全选按钮与当前点击的全选按钮保持一致
            $('.checkbox-all').prop('checked', $(sourceEle).prop('checked'));
这个句代码的意思为：点击 case "checkbox-all" ，使所有的单选框选中，并且使所有的全选框选中，因为全选框有上下两个


方法2： const sourceEle = event.target || event.srcElement;
这里做了浏览器兼容，通过js中的逻辑判断：对于|| 而言，如果是真返回当前，是假返回后一个
                                  对于 && 而言，如果是真返回后一个，是假返回当前
对这个这是不熟悉的朋友要去学习一下js中的逻辑判断哦！、

方法3：保留小数
给一个计算之后返回的数保留指定位数的小数，使用的是toFixed（） 方法：
sumPrice.html('￥' + (currentNum.val() * (currentPrice.html().substr(1))).toFixed(2));

方法4： 获取当前点击的事件：event.target()，要注意我这里是进行了赋值 sourceEle = event.target(); 这是原生的代码，如果要使用jquery 要用$（）进行包装、

方法5：自己分装弹出确认、更新价格、更新商品数量、刷新页面的函数
注意：在更新商品数量的时候要进行判断，这里主要是指用户在删除一个商品之后要进行判断，checkbox是否都选上了，如果选上了就要把全选框给勾选上，判断条件：

    // 更新完之后还要判断单选框是否都选择了，选择了之后要把全选框也选上
    if ($('checkbox:checked') == $('checked').length) {
        $('.checkbox-all').prop('checked', true);
    } else {
        $('.checkbox-all').prop('checked', false);
    }

判断商品数量也好解决，但是有一个注意点，商品的数量是指商品类型的数量，不是商品数量的综合，注意是类型！
所以判断长度只要判断单选框的数量即可：$('.checkbox:checked').length

最后一些：输入框的验证、当focus集中在数量输入框的时候获取当前商品的数量，商品+1、-1 删除商品的操作，只要用心就能实现！

总结

实现一个项目之前，一定一定要进行功能分析，购物车项目，主要核心有两点，第一点是进行页面初始化的处理，通过立即执行函数，和init（）函数加载页面，如果没有页面，功能实现的再好用户看不到，是没有用的，第二部，就是事件委托（通过事件源对象区分不同的按钮，通过不同的按钮给与不同的业务逻辑），通过一个cart事件委托，把cart中所有的点击事件都处理了，这是一个很好的解决办法

源码：

css代码：

body ,*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 0;
    font-size: 14px;
    font-family: "微软雅黑";
    font-weight: lighter;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #2B2B2B;
    font-weight: 900;
}
a:hover{
    color: red;
}
/* 去掉number控件的上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

#cart{
    width: 1000px;
    margin: 0px auto;
    /* background-color: #ccc; */
}
.cart-filter-bar{
    width: 100%;
    height: 40px;
    /* background-color: #00BFFF; */
    color: orangered;
    line-height: 40px;
    padding-left: 20px;
}
.cart-filter-bar h3{
    display: inline-block;
}
.cart-thead{
    width: 100%;
    height: 44px;
    background-color:#f6f6f6;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
}
.cart-thead .column{
    flex: 1;
}
.cart-thead .t-good{
    flex:4;
}
.checkbox{
    vertical-align: middle;
}
.cart-tbody{
    width: 100%;
    /* height: 200px; */
}
.ml5{
    cursor: pointer;
    width: 16px;
    height: 16px;
    background-image:url(assets/下载.png);
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.cart-tbody-item .shop{
    padding-left: 10px;
    height: 40px;
    line-height:50px;
}
.cart-tbody-item .shop .shop-text{
    margin-left: 10px;
}
.item-form{
    border-top: 2px solid #a5b2b8;
    height: 120px;
    /* background-color: red; */
    /* background-color: #fff2df; */
    display: flex;
    padding: 20px 0 0 10px;
    color: #2B2B2B;
}
.item-form .p-checkbox{
    flex:1;
}
.item-form .p-goods{
    flex:10;
    display: flex;
}
.item-form .p-goods .p-img{
    width: 80px;
}
.item-form .p-goods .p-msg{
    flex: 1;
    padding-right: 30px;
    padding-left: 10px;
    font-size: 12px;
    line-height: 20px;
}
.item-form .p-price{
    flex:2;
}
.item-form .quantity{
    flex:3;
    font-size: 0;
}
.item-form .quantity input{
    width: 44px;
    text-align: center;
}
.item-form .quantity button{
    width: 20px;
}
.item-form .p-sum{
    flex:2;
}
.item-form .p-ops{
    flex:2;
}
.cart-foot{
    width: 100%;
    height: 44px;
    border: 1px solid #8080805e;
    margin-top: 20px;
    padding-left: 10px;
    display: flex;
}
.cart-foot .left{
    flex: 1;
    display: flex;
    align-items: center;
}
.cart-foot .left .select-all{
    margin-right: 10px;
}
.cart-foot .right{
    flex: 3;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    
}
.cart-foot .right .price-sum .price-show{
    display: inline-block;
    
}
.cart-foot .right .price-sum .amount-sum em{
    color: orangered;
    padding:5px;
    font-weight: bolder;
}
.cart-foot .right .price-sum .price-show em{
    font-size:20px;
    color: orangered;
    padding-right: 10px;
    font-weight: bolder;
}
.cart-foot .right .btn-area{
    cursor: pointer;
    height: 100%;
    background-color: orangered;
    color: #fff;
    width: 100px;
    text-align: center;
    line-height: 44px;
    font-size: 20px;
}
.show{
    background-color: #fff2df;
}

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./main.css"/>
    </head>
    <body>
        <div id="cart">
            <div class="cart-filter-bar">
                <h3>全部商品</h3>
                <span class="number">4</span>
            </div>
            <div class="cart-thead">
                <div class="column">
                    <input type="checkbox" class="checkbox-all"> 全选
                </div>
                <div class="column t-good">商品</div>
                <div class="column t-price">单价</div>
                <div class="column t-quantity">数量</div>
                <div class="column t-sum">小计</div>
                <div class="column t-action">操作</div>
            </div>
            <div class="cart-tbody">
                
            </div>
            <div class="cart-foot">
                <div class="left">
                    <div class="select-all">
                        <input type="checkbox" class="checkbox-all"> 全选
                    </div>
                    <div class="operation">
                        <a href="javascript:void(0);" class="delete-all">删除选中的商品</a>
                    </div>
                </div>
                <div class="right">
                    <div class="btn-area">
                        去结算
                    </div>
                    <div class="price-sum">
                        <span class="amount-sum">
                            已选择<em></em>件商品
                            <b class="up">^</b>
                        </span>
                        <div class="price-show">
                            <span class="text">总价:</span>
                            <span class="total-price"><em></em></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-3.6.1.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

js代码：

// 功能分析
/* 
    1. 页面初始化：
        1.1 商品总数
        1.2 已选的商品数量
        1.3 初始化cartBody
        1.4 价格： 小计、总价
        1.5 勾选状态初始化

    2. 全选
        2.1 当用户点击全选框的时候，处理全选逻辑
        2.2 获取所有全选和行选择框
        2.3 全选勾上，行选择框都勾上，全选框不勾上，行选择框不全部勾上
        2.4所有行都勾上，全选框勾上

    3. 删除功能
        3.1 获取删除按钮和删除所有的按钮
        3.2 点击行删除按钮，删除当前行
        3.3 点击删除所有按钮，根据已经勾选的行选择框，找到item进行删除

    4. 事件委托
        4.1 给cart添加点击事件，通过事件源对象区分不同的按钮区分不同按钮给与不同的业务逻辑

*/

// 全局变量

let cart = $('#cart'); // 用于事件委托
let cartTbody = $('.cart-tbody');//网页主题
let numberTop = $('.number'); //顶部商品数量
let selectItems = $('.amount-sum em'); //已选商品数量
let totalPrice = $('.total-price em');  //商品总价
let inputNum = null; // 单件商品数量输入框
let currentCount = -1; // 当进入单个商品输入框是，单个商品输入输入框的输入数量

// 立即执行函数加载页面数据
var lzq = (function () {
    var goods = [{
        shop: {
            title: "美家星京东家具自营旗舰店",
            link: "https://item.jd.com/8814349.html",
        },
        good: {
            id: 1,
            imgUrl: 'https://img20.360buyimg.com/n0/s80x80_jfs/t1/135815/14/21629/311109/620620d7Eb9bfa429/8700f5632a208a26.jpg.dpg',
            info: "美家星 简易衣柜布衣柜卧室超稳大号非实木单人双人简易组装布衣橱加粗钢",
            num: 1,
            price: 99,
            link: "https://item.jd.com/8814349.html"
        }
    },
    {
        shop: {
            title: "南恩生活电器专营店",
            link: "https://mall.jd.com/index-915027.html",
        },
        good: {
            id: 2,
            imgUrl: 'https://img13.360buyimg.com/n0/s80x80_jfs/t1/166886/18/25547/753680/62b9040cE563f51e9/910391007d9918ca.png!q70.jpg',
            info: "小米有品 迷你内裤内衣洗衣机小型婴儿波轮洗衣机儿童宝宝洗袜子机无线充",
            price: 338,
            num: 1,
            link: "https://item.jd.com/10055039798646.html"
        }
    },
    {
        shop: {
            title: "HUWI旗舰店",
            link: "https://mall.jd.com/index-11749107.html",
        },
        good: {
            id: 3,
            imgUrl: 'https://img11.360buyimg.com/n0/s80x80_jfs/t1/126607/39/27266/224156/624eb0d8E2eefa105/3a60a4c1e2ef71eb.jpg.dpg',
            info: "HUWI 国行【2022款英特尔可选酷睿】金属笔记本电脑轻薄本大学生上网",
            price: 2788,
            num: 1,
            link: "https://item.jd.com/10043598885664.html"
        }
    },
    {
        shop: {
            title: "苏泊尔京东自营旗舰店",
            link: "https://mall.jd.com/index-1000001228.html",
        },
        good: {
            id: 4,
            imgUrl: 'https://img10.360buyimg.com/n0/s80x80_jfs/t1/102090/33/26127/115424/63131961Ee57c91e2/da360fe968feef56.jpg.dpg',
            info: "苏泊尔（SUPOR） 即热式饮水机家用 过滤母婴台式直饮机净水",
            price: 1599,
            num: 1,
            link: "https://item.jd.com/100038062656.html"
        }
    }

    ];
    return goods;
})();

init();


// 使用模板字符串进行页面初始化
function init() {
    for (let i = 0; i < lzq.length; i++) {
        let shopTitle = lzq[i].shop.title;
        let shopLink = lzq[i].shop.link;
        let goodImgUrl = lzq[i].good.imgUrl;
        let goodInfo = lzq[i].good.info;
        let goodPrice = lzq[i].good.price;
        let goodLink = lzq[i].good.link;
        let goodNum = lzq[i].good.num;
        let sumGoodsPrice = parseInt(goodPrice * goodNum).toFixed(2); // 总价保留两位小数
        let module = `<div class="shop">
        <span class="shop-text">
            <a href="${shopLink}" target="_blank">${shopTitle}</a><i class="ml5"></i>
        </span>
    </div>
    <div class="item-form">
        <div class="cell p-checkbox">
            <input type="checkbox" class="checkbox">
        </div>
        <div class="cell p-goods">
            <div class="p-img">
                <a href="${goodLink}" target="_blank">
                    <img src="${goodImgUrl}" alt="">
                </a>
            </div>
            <div class="p-msg">
                <div class="p-name">
                    <a href="${shopLink}" target="_blank">${goodInfo}</a>
                </div>
            </div>
        </div>
        <div class="cell p-price">
            <span class="p-price-cont">￥${goodPrice}</span>
        </div>
        <div class="cell cart-number quantity">
            <button class="cart-number-dec">-</button>
            <input type="number" class="cart-number-input" value="1">
            <button class="cart-number-inc">+</button>
        </div>
        <div class="p-sum">
            <strong>￥${sumGoodsPrice}</strong>
        </div>
        <div class="cell p-ops">
            <a href="javascript:void(0);" class="delete-row">删除</a>
        </div>
    </div>`;

        // 将页面主题appendchild cartTbody中
        let cartTbodyItem = document.createElement('div');
        cartTbodyItem.className = 'cart-tbody-item';
        cartTbodyItem.innerHTML = module;
        cartTbody[0].appendChild(cartTbodyItem);
    }

    numberTop[0].innerHTML = lzq.length;
    selectItems[0].innerHTML = 0;
    totalPrice[0].innerHTML = '￥' + '0.00';
    inputNum = $('.cart-number-input');
}

// 事件委托
cart[0].onclick = function (e) {
    const event = e || window.event;
    const sourceEle = event.target || event.srcElement;  // 返回触发的事件
    const temp = sourceEle.className; // 根据类名获取匹配的元素

    switch (temp) {
        case "checkbox-all":
            // 让所有复选框和当前点击全选的按钮保持一致
            // prop 设置或返回被选元素的属性和值
            $('.checkbox').prop('checked', $(sourceEle).prop('checked'));
            // 使另一个全选按钮与当前点击的全选按钮保持一致
            $('.checkbox-all').prop('checked', $(sourceEle).prop('checked'));
            // 为全选的商品添加背景颜色,取消全选去除所有背景颜色
            if ($(sourceEle).prop('checked')) {
                $('.checkbox').parents('.item-form').addClass('show');
            } else {
                $('.checkbox').parents('.item-form').removeClass('show');
            }

            //  更新已选商品的数量和价格
            getSelectedItems();
            getSum()

            break;
        case 'checkbox':
            if ($(sourceEle).prop('checked')) {

                // '.checkbox' 不能用类名更改,因为所有商品的类名相同要通过当前点击事件 sourceEle来更改样式
                $(sourceEle).parents('.item-form').addClass('show');
            } else {
                $(sourceEle).parents('.item-form').removeClass('show');
            }
            // 判断是否符合全选按钮的条件
            if ($('.checkbox:checked').length == $('.checkbox').length) {
                $('.checkbox-all').prop('checked', true);
            } else {
                $('.checkbox-all').prop('checked', false);
            }

            // 更新商品数量和价格
            getSelectedItems();
            getSum();
            break;
        // 删除
        case 'delete-row':
            var result = DialogMessage("确定移除商品？");
            if (result) {
                $(sourceEle).parents('.cart-tbody-item').remove();
                flush();// 刷新
            }
            break;
        case 'delete-all':
            if ($('.checkbox-all').prop('checked')) {
                cartTbody[0].innerHTML = '';
                flush();
            } else {
                $('.checkbox:checked').parents('.cart-tbody-item').remove();
                flush();
            }
            break;
        // 增加商品:数量改变，单价也要跟着改变，获取单价和数量的值
        case 'cart-number-inc':
            let currentNum = $(sourceEle).siblings('.cart-number-input');
            let currentPrice = $(sourceEle).parent().siblings('.p-price').children('span');
            let sumPrice = $(sourceEle).parent().siblings('.p-sum').children('strong'); // 总价格

            // 设置商品上限
            if (currentNum == 99) {
                alert('商品已经添加上限，请购买后在添加！')
                return;
            }
            console.log(currentPrice.html().substr(1)); //substr(1) 获取 ￥99 中的￥后面的数字

            currentNum.val(parseInt(currentNum.val()) + 1);
            sumPrice.html('￥' + (currentNum.val() * (currentPrice.html().substr(1))).toFixed(2));
            getSum();
            break;
        case 'cart-number-dec':
            let currentNumDown = $(sourceEle).siblings('.cart-number-input');
            let currentPriceDown = $(sourceEle).siblings('.p-price').children('span');
            let sumPriceDown = $(sourceEle).parent().siblings('.p-sum').children('strong');
            if (currentNumDown.val() == 1) {
                var result = DialogMessage('确定移除商品？');
                if (result) {
                    $(sourceEle).parents('.cart-tbody-item').remove();
                    flush();
                }
                return;
            }
            // 商品-1计算价格和商品数量
            currentNumDown.val(parseInt(currentNumDown.val()) - 1);
            sumPriceDown.html('￥' + ((currentPriceDown.html().substr(1)) * currentNumDown.val()).toFixed(2));
            getSum()
            break;
        default:
            break;

    }
}
// 在焦点上时更新 currentCount
inputNum.on("focus", event => {
    currentCount = $(event.target).val();
})

// 商品输入框事件
inputNum.on('change', event => {
    let currentPrice = $(event.target).parent().siblings('.p-price').children('span');//单价
    let sumPriceChange = $(event.target).parent().siblings('.p-sum').children('strong');//总价

    sumPriceChange.html('￥' + ($(event.target).val() * currentPrice.html().substr(1)).toFixed(2));
    // $(event.target).val($(even.target).val())  //更新值
    currentCount = $(event.target).val();
    getSum();
})

inputNum.on('keyup', event => {
    var temp = 0;
    // 排除小数的影响
    if ($(event.target).val().indexOf('.') != -1) {
        $(event.target).val(currentCount);
    }
    if (Number($(event.target).val()) == 0 || $(event.target).val() < 0 || $(event.target).val() > 99) {
        $(event.target).val(currentCount);
    }
})
// 更新总价格
function getSum() {
    let sum = 0;
    let sums = $('.checkbox:checked').parent().siblings('.p-sum').children('strong');
    sums.each((i, ele) => {
        sum += parseFloat($(ele).html().substr(1)); // 获取价格
    })
    totalPrice.html(sum.toFixed(2))
}
// 更新选中的数量
function getSelectedItems() {
    var count = $('.checkbox:checked').length;
    selectItems.html(count);
}
// 弹框提示
function DialogMessage() {
    return confirm();
}
// 刷新页面
function flush() {
    getSelectedItems();
    getSum();
    // 更新完之后还要判断单选框是否都选择了，选择了之后要把全选框也选上
    if ($('checkbox:checked') == $('checked').length) {
        $('.checkbox-all').prop('checked', true);
    } else {
        $('.checkbox-all').prop('checked', true);
    }
}

转载自:https://juejin.cn/post/7145643090680741924

使用jQuery模拟京东购物车

使用jQuery模拟京东购物车（主要分析js逻辑原理）

一、思路分析(文章末尾附：源码)

第一步：功能分析

第二部：初始化全局变量

第三步：项目初始化工作

第四步：根据功能分析进行项目功能的实现

事件委托中有一些我觉得比较绕的地方，单独拿出来进行分析，以及好用的一些方法

总结

源码：