SOURCE

 // 设置初始购物车商品数量值
        var val = 0;
        // 给input标签绑定“input”事件，切记这边不绑定keydown事件，这个事件响应慢半拍，意味着在input中你输入1，它给你返回空，你再输入2，它给你返回1，因为它绑定的是键盘按下的那一瞬间，那个时候value值为空
        $('input').on("input", function () {
            // 每次触发input事件，就执行cont函数，并传入0，这边的0并没有起到什么作用，知识为了传参而传参，是为了更好的配合，点击+或者点击-的事件
            cont(0);
            // 当手动输入数字时，这边也需要进行一次判断，及时设置上相对应的不可点击背景色
            lim();
        })
        // 设置lim函数，用于判定边界阈值，来确定不可点击的区域背景色
        function lim() {
            // console.log('触发');
            // 当输入框里为0时，那么-的区域颜色就变深（给这个元素增加class名，class名在css中已经提前设定好颜色了，下面同理）
            if (val === 0 ) {
                $('.reduce').addClass('limit');
              	$('.plus').removeClass('limit');
            }
            // 当输入框为20时，那么+的区域颜色就变深
            else if (val === 20) {
                $('.plus').addClass('limit');
             		$('.reduce').removeClass('limit');
            }
            else {
                // 如果输入框里的值都不为0 或者 20 那么意味着，这两个区域都是可以再次点击的，所以移除这个class名
                $('.limit').removeClass('limit');
            }
        }

        // 当页面刷新时，就执行一次lim函数，确保0区域颜色深
        lim();

        // 每次触发input事件，都将触发cont函数
        function cont(num) {
            // parseInt("2i") 会返回2，parseInt会尽可能的返回首部整数，其他位置不生效，意味着在原有的基础上，parseInt都将返回整数。所以这里如果款内原本为2的话，那么将不会进入第一个判断区，款里什么值，还是什么值。
            val = parseInt($('input').val()) + num;
            // 如果val小于0，或者不是一个数的话那么就让val等于0，下面同理。 前面都说了，这边的基础上parseInt()返回都为整数，那么这边为什么要来个判读是不是一个数呢，因为这边如果把款里的数值用键盘的删除键删除的话，那么val将会是一个NaN，切记
            if (val <= 0 || isNaN(val)) {
                val = 0
            }
            else if ( val >= 20 ) {
                val = 20;
            }
            // 关键一步，设置款里的这个值为val
            $('input').val(val);
        }

        // 给-和+绑定点击事件
        $(".reduce").add(".plus").on("click", function () {
            // 判定当前点击的jQuery对象是不是-所在的元素，如果是的话那么执行cont函数，并且传入参数-1，代表用户点击了减1，下面反之。
            if ( $(this).hasClass('reduce') ) { 
                cont(-1);
            }
            else {
                cont(1);
            }
            // 每次点击都要进行一次判定，判定当前的val是否到达阈值，并且改变背景颜色。
            lim();
        })

<div class="cart">
    <span class="reduce">-</span>
    <input type="text" value="0">
    <span class="plus">+</span>
</div>

.cart {
            position: relative;
            width: 110px;
            height: 30px;
            /* border: 1px solid black; */
            font-size: 0;
        }
        span {
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            background-color: #ededed;
            cursor: pointer;
            user-select: none;
        }
        input {
            position: absolute;
            top: 0;
            left: 30px;
            box-sizing: border-box;
            width: 50px;
            height: 30px;
            text-align: center;
            z-index: 999;
        }
        .cart span:nth-of-type(2) {
            position: absolute;
            right: 0;
            top: 0;
        }
        .cart .limit {
            background-color: #888;
        }