2021.05.14 求购物车总价格

最新推荐文章于 2024-09-11 14:09:02 发布

执子之手～

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量82

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_50638739/article/details/116783053

版权

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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);


                // 更新总结果
                getResult();

            })

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


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

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

            }

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

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

                // 更新总结果
                getResult();

            }

            // 给减少按钮添加点击事件
            $(".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);

                // 更新总结果
                getResult();

            }

            function getResult() {
                // 获取所有的商品行
                var li_list = $(".car_list li");

                // 拿所有商品行中的单行总价格
                var total_price = 0;
                li_list.each(function (idx, element) {
                    // 得到单行总价
                    var line_price = $(element).find(".count").text().substr(1);
                    line_price = parseFloat(line_price);
                    // 累加
                    total_price += line_price;
                })
                // 求最最终价格并显示在最底部
                $(".total").text("￥" + total_price.toFixed(2));
            }

            // 删除
            $(".car_list>li>a").click(function () {
                // 删除自己父级li
                $(this).parent().remove();
                // 更新结果
                getResult();
            });
        })
    </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>
        <a href="javascript:;">删除</a>
    </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>
        <a href="javascript:;">删除</a>

    </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>
        <a href="javascript:;">删除</a>

    </li>
</ul>
<p>小计：<span class="total" style="color: red">￥60</span></p>

</body>
</html>