JavaScript 实现购物车数量增加减少功能

雾化饼干 / 2024-10-21 / 原文

场景描述

在实现购物车功能时，需要限制用户加购的数量必须大于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>