2021-05-14

最新推荐文章于 2021-05-14 12:41:04 发布

我本无心.何来伤心

最新推荐文章于 2021-05-14 12:41:04 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/qq_50801654/article/details/116779101

版权

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.min.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));
            }
        })     
    </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>