参考购物车增减数量``` 商品1 - 1 + 商品2 - <!DOCTYPE html> <html lang="en

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        input[type=text] {
            width: 30px;
        }
    </style>

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

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

            // 给减少按钮添加点击事件
            $(".decrease").click(decreaseFunc);

            function decreaseFunc() {
                // 获取它对应的文本框的值
                var n = $(this).siblings("input").val();
                // 让文本值自增一
                n--;
                // 结果验证
                if(n<1){
                    alert("不能够再减了")
                    n = 1;
                }
                // 变更后的值回填到文本框中
                $(this).siblings("input").val(n);
            }
        })
    </script>
</head>
<body>

<ul class="car_list">
    <li><span class="title">商品1</span><span class="price"></span>
        <button class="decrease">-</button>
        <input type="text" value="1">
        <button class="increase">+</button>
    </li>
    <li><span class="title">商品2</span><span class="price"></span>
        <button class="decrease">-</button>
        <input type="text" value="1">
        <button class="increase">+</button>
    </li>
    <li><span class="title">商品3</span><span class="price"></span>
        <button class="decrease">-</button>
        <input type="text" value="1">
        <button class="increase">+</button>
    </li>
</ul>

</body>
</html>
参考 购物车增减数量

参考购物车增减数量
