jQuery练习：购物车数量加减

功能：
1.点击加减号，文本框的数字也做改变；
2.当数量是1时，不能再减；数量上限10，不能再加；
3.数量不在指定范围，加减号消失；
4.手动输入数字，点击加减号，文本框数字依然可以加减
5.默认数量为1

效果：

代码：

点击查看代码

a {
    text-decoration: none;
}

.wrapper {
    font-size: 0;
}

.wrapper .prev,
.wrapper .next {
    display: inline-block;
    height: 42px;
    width: 42px;
    background: #ccc;
    line-height: 42px;
    text-align: center;
    font-size: 25px;
    color: #000;
}

.wrapper .text {
    text-align: center;
    background: #fff;
    height: 42px;
    box-sizing: border-box;
    vertical-align: top;
}

.wrapper .min {
    color: #ccc;
}

点击查看代码

<div class="wrapper">
    <a href="javascript:;" class="prev">-</a>
    <input type="text" value="1" class="text">
    <a href="javascript:;" class="next">+</a>
</div>

点击查看代码

<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    var value = 1;//html标签用于显示，尽量不通过html显示的值来做逻辑判断，建议用js设值做判断

    /*
    * 当数值不在[1, 10]范围内时，加号减号不显示
    * 加上class名：min
    */
    function notIn() {
        if (value <= 1) {
            $('.prev').addClass('min');
        } else if (value >= 10) {
            $('.next').addClass('min');
        } else {
            $('.min').removeClass('min')
        }
    }


    notIn();//刷新页面默认文本框值为1，减号不显示

    /*
    * 加号减号功能
    * 用户输入时，需要获取用户输入的值，保证加减操作时数字的连贯
    * 获取到输入的值，是字符串，需要改成number类型
    */
    function count(num) {
        value = parseInt($('.text').val()) + num;
        if (value <= 1) {
            value = 1;
        } else if (value >= 10) {
            value = 10;
        }
        $('.text').val(value);
    }
    /*
    使用find函数，先给prev绑定点击事件，再end回退，给next绑定点击事件
    $('.wrapper').find('.prev').click(function(){
        count(-1);
        notIn();
    }).end().find('.next').click(function(){
        count(1);
        notIn();
    })
    */

    /*
    * 再精简一下，用add函数给prev和next一起绑定点击事件
    */
    $('.prev').add('.next').click(function () {
        if ($(this).hasClass('prev')) {
            count(-1);
        }else {
            count(1);
        }
        notIn();
    })
</script>