Una función de carrito de compras simulado que vale la pena ver

Función de página:

Cuando se hace clic en el botón Seleccionar todo, se seleccionan todos los botones de opción y el precio se muestra en el subtotal y debajo del total

Cuando se hace clic en los botones + y -, la cantidad cambia, al igual que la página de subtotal

El código detallado es el siguiente:

<!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>Document</title>
    <script src="./jq.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        table {
            border-collapse: collapse;
            margin-top: 30px;
            margin-bottom: 30px;
            width: 600px;
            text-align: center;
        }

        td,
        th {
            width: 120px;
        }

        button {
            border: 0;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><button class="all">全选</button></th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="getGoods"> </td>
            <td>电脑</td>
            <td class="price">200</td>
            <td>
                <button class="jian">-</button>
                <span>1</span>
                <button class="add">+</button>
            </td>
            <td class="total">200</td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="getGoods"> </td>
            <td>手机</td>
            <td class="price">100</td>
            <td>
                <button class="jian">-</button>
                <span>1</span>
                <button class="add">+</button>
            </td>
            <td class="total">100</td>
            <td>删除</td>
        </tr>
    </table>
    <div>
        <span>总计：</span>
        <span class="sum">0</span>
    </div>
    <script>
        //<script src="./jq.js">引入JQuery


        //加载页面时调用总价函数
        getSum();

        //1.加减功能

        //加法，通过add类名，获取button按钮add
        $(".add").click(function () {//当+按钮点击时
            // 1.1 算出数量变化
            let num = parseInt($(this).prev().text());//获取span的值，$this代表 <button class="add">+</button> .prve()上边的元素.text内容
            //获得的内容是String通过parseInt转换为整数
            num++;
            $(this).prev().text(num);//加加之后再进行赋值
            // 1.2 算出 小计价格
            let price = parseInt($(this).parent().prev().text());//获取price价格，通过add按钮获取父元素，再获取上一元素，在类型转换
            $(this).parent().next().text(price * num);//通过add按钮获取父元素，再获取下一元素，再进行赋值，在类型转换

            // 调用 总价
            getSum();
        })
        //加法，通过add类名，获取button按钮jian
        $(".jian").click(function () {
            // 1.1 算出数量变化
            let num = parseInt($(this).next().text());//获取span的值，$this代表 <button class="add">+</button> .next()下边的元素.text内容
            //获得的内容是String通过parseInt转换为整数
            num--;
            if (num < 1) {
                num = 1;
            }
            $(this).next().text(num);//减减之后再进行赋值
            // 1.2 算出 小计价格
            let price = parseInt($(this).parent().prev().text());//获取price价格，通过add按钮获取父元素，再获取上一元素，在类型转换
            $(this).parent().next().text(price * num);//通过add按钮获取父元素，再获取下一元素，再进行赋值，在类型转换

            // 调用 总价
            getSum();
        })

        // 2.总价 = 小计之和（选中条件下）设计函数
        function getSum() {
            let sum = 0;
            for (let i = 0; i < $('.total').length; i++) {//$('.total').length每点击一次后的小计得长度
                // 添加 选中判断的条件
                if ($('.total').eq(i).parent().find('input').prop('checked')) {
                    sum += parseInt($('.total').eq(i).text())//获取每一次小计的值
                }
            }
            $('.sum').text(sum);//给下方span总数进行赋值
        }

        // 3. 选中
        // 选中：有三种表现形式  
        // 1> 用户点击 出现 √    
        // 2> 添加属性 checked    
        // 3> js操作  attr()   /  prop('checked',true)

        // 3.1 全选
        $('.all').click(function () {//当全选按钮all点击时
            $('.getGoods').prop('checked', true);//让所有的单选按钮getGood选中
            // 调用 总价
            getSum();
        });
        // 3.2 用户选中
        $('.getGoods').click(function () {
            // 用户点击，其实已经选中了

            // 调用 总价
            getSum();
        });
    </script>
</body>

</html>

resultado:

Cuando se hace clic en el primer botón de opción:

Cuando se hace clic en el botón +:

Cuando se hace clic en el botón -:

Cuando se hace clic en el botón seleccionar todo:

Una función de carrito de compras simulado que vale la pena ver

Supongo que te gusta