https://www.cnblogs.com/sandraryan/

jq实现购物车功能

点击+- 增减数量,计算价格;

点击删除,删除当前行(商品)

点击- ,减到0 询问是否删除商品

点击全选 计算总价(商品只有被选中才能计算总价)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 782px;
            box-shadow: 0 0 10px lightblue;
            margin: 100px auto;
            text-align: center;
        }

        li {
            font-size: 20px;
            color: gray;
            width: 100px;
            height: 24px;
            line-height: 30px;
            list-style: none;
            border: 1px solid lightgray;
            float: left;
            padding: 10px;
        }

        ul {
            height: 46px;
            display: block;
            margin: 0 auto;
            clear: both;
            background-color: rgb(212, 241, 250);
        }

        .num {
            width: 150px;
        }

        .num input {
            width: 30px;
            text-align: center;
        }

        .total {
            clear: both;
            text-align: right;
            padding: 10px;
            font-size: 20px;
            color: red;
        }

        ul span {
            border: 1px solid lightgray;
            padding: 2px 10px;
            border-radius: 5px;
            /* background-color: lightgray; */
            color: gray;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <ul>
            <li><input name='all' type='checkbox'>all</li>
            <li>name</li>
            <li>price</li>
            <li class="num">number</li>
            <li>add</li>
            <li>operation</li>
        </ul>
        <ul>
            <li><input type="checkbox" name='one'>one</li>
            <li>phone</li>
            <li>1000.00</li>
            <li class='num'>
                <input type="button" value='-'>
                <input type="text" name='num' value="1">
                <input type="button" value='+'>
            </li>
            <li class="price">1000.00</li>
            <li><span>delete</span></li>
        </ul>
        <ul>
            <li><input type="checkbox" name='one'>one</li>
            <li>phone</li>
            <li>1000.00</li>
            <li class='num'>
                <input type="button" value='-'>
                <input type="text" name='num' value="1">
                <input type="button" value='+'>
            </li>
            <li class="price">1000.00</li>
            <li><span>delete</span></li>
        </ul>
        <ul>
            <li><input type="checkbox" name='one'>one</li>
            <li>phone</li>
            <li>1000.00</li>
            <li class='num'>
                <input type="button" value='-'>
                <input type="text" name='num' value="1">
                <input type="button" value='+'>
            </li>
            <li class="price">1000.00</li>
            <li><span>delete</span></li>
        </ul>
        <div class="total">total: <span> 0.00 </span></div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        // 计算总价的函数
        function calcTotal() {
            // 设置总价初始值
            var total = 0;
            // 获取所有name为one的input框
            var allOne = $('input[name = "one"]');
            // 获取单价
            var price = $('.price');
            // name为one的input框,如果被选中了,计算总价
            allOne.each(function () {
                if ($(this).prop('checked')) {
                    // 获取当前索引
                    var i = allOne.index($(this));
                    // eq()返回带有被选元素的索引
                    total += parseFloat(price.eq(i).text());
                }
            });
            // 总价的值写在页面上
            $('.total span').text(total);
        }


        $(function () {
            // 获取ul里面的span(删除键),注册点击事件
            $('ul span').click(function () {
                // 弹出输入框,如果用户点击了确认,返回true
                if (confirm('you delete your mother ne????')) {
                    // 删除当前删除键坐在的ul行
                    $(this).parent().parent().closest('ul').remove();
                    // 否则。(用户点击取消)什么都不做
                } else {}
                // 如果被选中了,改变总价,调用计算总价的函数
                // 计算总价
                calcTotal();
            });

            // 找到input 的name是num的元素,当内容改变时
            $('input[name = "num"]').change(function () {
                // 获取值并转换为浮点数(数量)
                var val = parseFloat($(this).val());
                // 如果值大于0,其父级的下一个兄弟的文本变成:当前值*当前值的父级的上一个元素值的浮点数
                // 即 数量 * 单价
                if (val > 0) {
                    // 吧单价的值获取并转为浮点型 * 单价(当前元素的父级的下一个元素)
                    $(this).parent().next().text(val * parseFloat($(this).parent().prev().text()));
                    // 如果当前值为0 ,删除按钮trigger 触发click事件
                } else if (val == 0) {
                    // 由于input[val = '-']获取的是集合,三个全都删掉了。在这里添加判断,如果值为0,当前行执行delete点击事件函数
                    if (confirm('you delete your mother ne????')) {
                        $(this).parent().parent().closest('ul').remove();
                    } else {}
                    calcTotal();
                    // $(this).parent().parent().remove();  //直接删除
                } else {
                    //默认1
                    $(this).val(1);
                }
                calcTotal();
            });

            // - 按钮
            // 获取减号,注册点击事件
            $('input[value = "-"]').click(function () {
                // - 的下一个的值(数字)-1 转为整形,设为-下一个元素(数字)的值
                //就是点击- 吧数字的值--
                $(this).next().val(parseInt($(this).next().val()) - 1);
                // 数字值trigger change事件

                $('input[name = "num"]').trigger('change');
            });


            // + 同理
            $('input[value = "+"]').click(function () {
                $(this).prev().val(parseInt($(this).prev().val()) + 1);
                $('input[name = "num"]').trigger('change');

            });
            // 选择框 选中一个框就执行一次计算价格的函数
            $('input[name = "one"]').click(function () {
                calcTotal();
            });
            // 当选中全选框时候,操作全选或者反选
            $('input[name = "all"]').click(function () {
                // prop方法设置或返回备选元素的属性和值
                // 当前元素(顶部复选框)被选中时(checked时)
                var ret = $(this).prop('checked');
                console.log(ret);

                // 每一个单选框都添加checked属性
                $('input[name="one"]').each(function () {
                    $(this).prop('checked', ret);
                });
                calcTotal();
            });

        });
    </script>
</body>

</html>

 布局就这样了~~~

02-12 12:51