购物车的数值增减与输入

最新推荐文章于 2024-07-12 14:10:05 发布

没错，我就是

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量78

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_42755622/article/details/139545849

版权

<div class="counter-container">
    <button class="counter-button decrement">-</button>
    <input type="number" class="counter-input" value="0" min="0">
    <button class="counter-button increment">+</button>
</div>

<script>
    $(document).ready(function () {
        var $counterInput = $('.counter-input');

        // 绑定减按钮的点击事件
        $('.decrement').on('click', function () {
            var currentValue = parseInt($counterInput.val(), 10);
            if (!isNaN(currentValue)) {
                currentValue--;
                if (currentValue < 0) {
                    currentValue = 0; // 防止数值小于0
                }
                $counterInput.val(currentValue);
            }
        });

        // 绑定加按钮的点击事件
        $('.increment').on('click', function () {
            var currentValue = parseInt($counterInput.val(), 10);
            if (!isNaN(currentValue)) {
                currentValue++;
                $counterInput.val(currentValue);
            }
        });

        // 监听输入框的输入事件，确保输入的是数字
        $counterInput.on('input', function () {
            this.value = this.value.replace(/[^0-9]/g, ''); // 只允许输入数字
        });
    });
</script>