登录
原创

jQuery-购物车

发布于 2021-09-24 阅读 142
  • 前端
  • jQuery
原创

页面效果:

购物车.gif

实现思路:

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

评论区

零00
5粉丝

时光荏苒,我自清欢

1

0

0

举报