前端提高篇(九十)：jQuery练习：购物车数量加减

Posted 2023-01-23 安之ccy

功能：
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>