2024-10-16 11:17阅读: 128评论: 0推荐: 0

JavaScript 实现输入框数字的增加减少功能（以购物车功能的数量加减限制为例）

场景描述

在实现购物车功能时，需要限制用户加购的数量必须大于0且不超过加购商品的库存量。

代码实现

写法一

下列代码中，<input></input>中使用 min 属性定义数量的最小值，max 属性定义数量的最大值。在实际开发中可以整合 springboot 和 thymeleaf，使用 th:max="${商品对象的库存量}" 将 max 的值设置为加购商品的库存量。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车功能的数量加减限制</title>
</head>

<body>
    <div class="input-counter">
        <!-- 减少按钮 -->
        <button class="minus-btn">-</button>
        <!-- 加购数量 -->
        <input type="text" name="count" value="1" min="1" max="5">
        <!-- 增加按钮 -->
        <button class="plus-btn">+</button>
    </div>

    <script>
        // 获取类名为 minus-btn 的元素 减少按钮
        const minusBtn = document.querySelector('.minus-btn');
        // 获取类名为 plus-btn 的元素 增加按钮
        const plusBtn = document.querySelector('.plus-btn');
        // 获取类名为 minus-btn 的元素 加购数量
        const input = document.querySelector('input[name="count"]');

        // 为减少按钮添加事件监听器
        minusBtn.addEventListener('click', () => {
            // 获取 input 元素的值
            let currentValue = parseInt(input.value);
            // 当值大于 input 的 min 属性值时，值 - 1
            if (currentValue > parseInt(input.min)) {
                input.value = currentValue - 1;
            }
        });
        
        // 为增加按钮添加事件监听器
        plusBtn.addEventListener('click', () => {
            // 获取 input 元素的值
            let currentValue = parseInt(input.value);
            // 当值小于 input 的 max 属性值时，值 + 1
            if (currentValue < parseInt(input.max)) {
                input.value = currentValue + 1;
            }
        });
    </script>
</body>

</html>

效果显示

点击“-”按钮，输入框中的数量减 1；点击“+”按钮，输入框中的数量加 1。
当输入框中的数量为 1 时，点击“-”按钮数量不变；另外，当数量为 5 时，点击“+”按钮数量亦不变。

写法二

遇到的第二种写法，结合了 Thymeleaf 模板引擎和后端的业务逻辑。因为整个功能涉及了多个代码文件，所以主要提供前端的 JavaScript 代码，写法可供参考~

<div class="input-counter">
    <span id="sub" th:name="${order.id}" class="minus-btn"><i class="fa-solid fa-minus"></i></span>
    <input id="salary" th:class="${order.count}" type="text" th:max="${order.good.stock+order.count}" min="1"
           th:value="${order.count}"/>
    <span id="add" th:name="${order.id}" class="plus-btn"><i class="fa-solid fa-plus"></i></span>
</div>

<script>
    // 获取id名为 salary 的元素
    const input = document.querySelector('input[id="salary"]');

    $(function () {
        // - 绑定点击事件
        $("span[id=sub]").click(function () {
            //获取id
            var workerId = $(this).attr("name");
            var workerSalary = $(this).next().attr("class");
            console.log(workerId)
            console.log(workerSalary)
            //计算调整后的数量
            workerSalary = parseInt(workerSalary);
            if (workerSalary <= 1) {
                // 确认弹窗
                if (window.confirm("是否从购物车中删除该商品？")) {
                    // 确认删除
                    window.location.href = "/delCart/" + workerId;
                } else {
                    // 取消删除
                    window.location.href = "/cart";
                }
            } else {
                workerSalary -= 1;
                //$(this).next().text(workerSalary);
                $.ajax({
                    url: '/updateOrder',
                    data: {
                        orderId: workerId,
                        count: workerSalary
                    },
                    method: "POST",
                    success: function (data) {
                        if (data == "OK") {
                            alert("减少成功");
                            window.location.href = "/cart";
                        } else {
                            alert("减少失败")
                        }
                    }
                })
            }
        })
    })

    $(function () {
        // + 绑定点击事件
        $("span[id=add]").click(function () {
            //获取id
            var workerId = $(this).attr("name");
            var workerSalary = $(this).prev().attr("class");
            //计算调整后的数量
            workerSalary = parseInt(workerSalary);
            // alert("剩余库存量："+pageInfo);
            if (workerSalary >= parseInt(input.max)) {
                alert("库存不足");
                window.location.href = "/cart";
            } else {
                workerSalary += 1;
                //$(this).prev().text(workerSalary);
                $.ajax({
                    url: '/updateOrder',
                    data: {
                        orderId: workerId,
                        count: workerSalary
                    },
                    method: "POST",
                    success: function (data) {
                        if (data == "OK") {
                            alert("添加成功");
                            window.location.href = "/cart";
                        } else {
                            alert("添加失败");
                        }
                    }
                })
            }
        })
    })
</script>