jQuery-购物车 - sdk社区

页面效果：

购物车.gif

实现思路：

实现按钮的全选控制
(1). 将全选按钮checkall的状态赋值给小按钮、以及其他的全选按钮
① 获取全选按钮对象，使用change()函数，每次按钮状态改变就执行该函数
② 获取当前点击的全选按钮的 “checked” 属性值，改属性是标签的自带属性，所以用prop()获取- - -(this).prop("checked") ③ 获取小按钮对象以及其他全选按钮对象，将其 “checked” 属性值设置为全选按钮的 “checked” 属性值 (2). 当所有小按钮全部选中时，将全选按钮的状态设置为选中，只要有没选上的，就设置全选按钮状态为false ① 获取被选中的复选框个数- - -(“.小按钮class名:checked”).length
② 获取总的小按钮个数- - -$(“.小按钮class名”).length
③ 当选中的个数等于总个数，设置全选按钮的 “checked” 属性值为 true，选中状态；否则，就是没有全部选中，设置全选按钮的 “checked” 属性值为 false
实现数量加减控制
(1). 为增加元素添加点击事件，事件处理程序：
① 获取当前数量，
② 数量自增1
③ 将变化后的数量再赋值给显示数量的表单元素
(2). 为减元素添加点击事件，事件处理程序：
① 获取当前数量，
② 数量自减1
③ 将变化后的数量再赋值给显示数量的表单元素
④ 在步骤①之后，步骤②之前添加条件判断，如果数量等于1，就跳出函数，不执行后面的②、③步骤，当数量为1后，不在继续减，点了减也没用
注意：每个加减数量设成一个小组，不互相影响，点击加减控制其小组内的兄弟数量- - -eg: $(this).siblings(“.itxt”).val()
修改商品小计
(1). 加元素绑定点击事件，事件处理程序- - -
① 改变数量：获取当前数量，点击后，数量加1，
② 改变小计：获取价格，获取文本值用text()，截取数字部分，例如：substr(1)；小计等于价格乘以当前数量；再将计算出的数字赋值给小计，前面有非数字文字时，注意使用字符串连接后再赋值，例如：html(“￥” + p * num)
(2). 减元素绑定点击事件，事件处理程序- - -
① 改变数量：获取当前数量，点击后，数量减1；如果数量为1，不再继续减
② 改变小计：获取价格，获取文本值用text()，截取数字部分，例如：substr(1)；小计等于价格乘以当前数量；再将计算出的数字赋值给小计，前面有非数字文字时，注意使用字符串连接后再赋值，例如：html(“￥” + p * num)
实现总数量和总价格统计
① 编写一个统计函数，选择被勾选的商品，将其选择的数量的小计价格进行统计- - eg: $(“.j-checkbox:checked”)获取被勾选的,each()函数遍历，获取数量和价格信息，进行统计，遍历统计完后再将得到的数据赋值给- - -总量、总价元素
② 先自身调用一次函数，进来的时候初始化数据信息，
③ 在全选按钮变化事件、小勾选按钮变化事件、加减元素点击事件、数量表单变化事件中都调用统计函数，每次发生变化就重新统计总数量和价格

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .content {
            width: 550px;
            margin: 100px auto;
        }
        li {
            list-style: none;
        }
        .fruit-list {
            padding: 20px;
        }
        .fruit-list li {
            margin-top: 10px;
        }
        input[type="checkbox"] {
            margin-right: 10px;
        }
        .itxt {
            outline: none;
            width: 30px;
            text-align: center;
        }
        .fruit-item {
            display: flex;
            justify-content: space-between;
        }
        .p-goods {
            display: flex;
            justify-content: space-between;
        }
        .f-name {
            width: 100px;
        }
        .p-price {
            width: 100px;
        }
        .num {
            width: 200px;
            text-align: center;
        }
        .num span {
            cursor: pointer;
        }
        .p-sum {
            width: 100px;
        }
        .p-total {
            float: right;
            padding: 30px;
            text-align: right;
        }
        .p-total span{
            color: red;
        } 
    </style>
</head>
<body>
    <div class="content">
        <div>
            <input type="checkbox" class="checkall">全选
        </div>
        <ul class="fruit-list">
            <li class="fruit-item">
                <div class="p-checkbox">
                    <input type="checkbox" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="f-name">苹果</div>
                    <div class="p-price">￥6.66</div>
                    <div class="num">
                        <span class="decrease">-</span>
                        <input type="text" class="itxt" value="1">
                        <span class="increase">+</span>
                    </div>
                    <div class="p-sum">￥6.66</div>
                </div>
            </li>
            <li class="fruit-item">
                <div class="p-checkbox">
                    <input type="checkbox" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="f-name">红柚</div>
                    <div class="p-price">￥5.20</div>
                    <div class="num">
                        <span class="decrease">-</span>
                        <input type="text" class="itxt" value="1">
                        <span class="increase">+</span>
                    </div>
                    <div class="p-sum">￥5.20</div>
                </div>
            </li>
            <li class="fruit-item">
                <div class="p-checkbox">
                    <input type="checkbox" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="f-name">榴莲</div>
                    <div class="p-price">￥25.99</div>
                    <div class="num">
                        <span class="decrease">-</span>
                        <input type="text" class="itxt" value="1">
                        <span class="increase">+</span>
                    </div>
                    <div class="p-sum">￥25.99</div>
                </div>
            </li>
        </ul>
        <div>
            <input type="checkbox" class="checkall">全选
            <a href="#">删除选中商品</a>
        </div>
        <div class="p-total">
            <div class="amount-sum">已选<span>0</span>件商品</div>
            <div class="price-sum">总价：<span>￥0.00</span></div>
        </div>
        
    </div>
    <script src="js/jQuery.min.js"></script>
    <script>
        $(function() {
            // 将全选按钮checkall的状态赋值给小按钮
            $(".checkall").change(function() {
                $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
                // 调用函数，统计总数量和总价格
                getSum();
            });
            // 当所有小按钮全部选中时，将全选按钮的状态设置为选中，只要有没选上的，就设置全选按钮状态为false
            $(".j-checkbox").change(function() {
                if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
                    $(".checkall").prop("checked", true);
                } else {
                    $(".checkall").prop("checked", false);
                }
                // 调用函数，统计总数量和总价格
                getSum();
            });

            // 加元素绑定点击事件，点击数量增加，小计增加
            $(".increase").click(function() {
                // 改变数量
                var num = $(this).siblings(".itxt").val();
                num++;
                $(this).siblings(".itxt").val(num);
                // 改变小计
                var p = $(this).parent().siblings(".p-price").text().substr(1);
                $(this).parent().siblings(".p-sum").html("￥" + (p * num).toFixed(2));
                // 调用函数，统计总数量和总价格
                getSum();
            });

            // 减元素绑定点击事件，点击数量减少，小计减少
            $(".decrease").click(function() {
                // 改变数量
                var num = $(this).siblings(".itxt").val();
                // 数量为1后，不能再减
                if (num == 1) {
                    return false;
                }
                num--;
                $(this).siblings(".itxt").val(num);
                // 改变小计
                var p = $(this).parent().siblings(".p-price").text().substr(1);
                $(this).parent().siblings(".p-sum").html("￥" + (p * num).toFixed(2));
                // 调用函数，统计总数量和总价格
                getSum();
            });

            // 为数量表单绑定变化事件
            $(".itxt").change(function() {
                var num = $(this).val();
                var p = $(this).parent().siblings(".p-price").text().substr(1);
                $(this).parent().siblings(".p-sum").html("￥" + (p * num).toFixed(2));
                // 调用函数，统计总数量和总价格
                getSum();
            })
            
            // 先调用一次，初始化数据
            getSum();
            function getSum() {
                var amount = 0;
                var price = 0;
                // 对选中的商品进行统计总数量和价格
                $(".j-checkbox:checked").each(function(i, ele) {
                    amount += parseInt($(ele).parent().siblings().find(".itxt").val());
                    price += parseFloat(($(ele).parent().siblings().find(".p-sum").text().substr(1)));
                });
                $(".amount-sum span").text(amount);
                $(".price-sum span").text("￥" + price.toFixed(2));
            }
        });
    </script>
</body>
</html>