fiy 求总价格参考``` 商品1 ￥10 - 1 + ￥10 商品2 ￥20 - 1 + ￥20 商品3 ￥30 -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        input[type=text] {
            width: 30px;
        }
    </style>

    <script>
        $(function () {

            // 文本框改变事件
            $("input[type='text']").change(function () {
                // 获得数量
                var n = $(this).val();
                // 获得价格
                var price = $(this).siblings(".price").text().substring(1);
                // 更新当前行数据
                var total = (n * price).toFixed(2);
                $(this).siblings(".count").text("￥" + total);
            })

            // 给增加按钮添加点击事件
            $(".increase").click(increaseFunc);


            function updateLine(t, n) {
                // 获取单价
                var price = t.siblings(".price").text().substring(1);
                // 求单行总价
                var sumPrice = n * price;
                // 更新总价
                t.siblings(".count").text("￥" + sumPrice);
            }

            function getResult() {
                // 获取所有符合条件的行

            }

            function increaseFunc() {
                // 获取它对应的文本框的值
                var n = $(this).siblings("input").val();
                // 让文本值自增一
                n++;
                // 变更后的值回填到文本框中
                $(this).siblings("input").val(n);

                // 更新数据
                updateLine($(this), n);

            }

            // 给减少按钮添加点击事件
            $(".decrease").click(decreaseFunc);

            function decreaseFunc() {
                // 获取它对应的文本框的值
                var n = $(this).siblings("input").val();
                // 让文本值自增一
                n--;
                // 结果验证
                if (n < 1) {
                    alert("不能够再减了")
                    n = 1;
                }
                // 变更后的值回填到文本框中
                $(this).siblings("input").val(n);

                // 更新数据
                updateLine($(this), n);


            }
        })
    </script>
</head>
<body>

<ul class="car_list">
    <li><span class="title">商品1</span><span class="price"></span>
        <span class="price">￥10</span>
        <button class="decrease">-</button>
        <input type="text" value="1">
        <button class="increase">+</button>
        <span class="count">￥10</span>
    </li>

    <li><span class="title">商品2</span><span class="price"></span>
        <span class="price">￥20</span>
        <button class="decrease">-</button>
        <input type="text" value="1">
        <button class="increase">+</button>
        <span class="count">￥20</span>

    </li>
    <li><span class="title">商品3</span><span class="price"></span>
        <span class="price">￥30</span>
        <button class="decrease">-</button>
        <input type="text" value="1">
        <button class="increase">+</button>
        <span class="count">￥30</span>
    </li>
</ul>
<p>小计：<span class="total" style="color: red">￥60</span></p>

</body>
</html>
fiy 求总价格 参考

fiy 求总价格参考
