自己封装的jQuery数字加减输入框插件

如图加减数字输入框

number-input.js

(function ($) {
    $.extend({
        numberInputInit: function (options) {
            var defaults = {
                numberSeletctor: ".numberInputBox",
                max: 999,
                min: 0,
                interval: 1
            }
            var opts = $.extend({}, defaults, options);
            var $numberTag = $(opts.numberSeletctor)
            var setMax = opts.max;//设定最大值
            var setMin = opts.min;
            var setInterval = opts.interval;//设定间隔
            $.each($numberTag, function (key, box) {
                $(box.children[0]).click(function () {
                    if (box.children[1].value == setMin) {
                        $(box.children[0]).css({
                            "cursor": "not-allowed",
                            "color": "#ccc"
                        })
                    } else {
                        box.children[1].value = Number(box.children[1].value) - setInterval;
                        $(box.children[0]).css({
                            "cursor": "pointer",
                            "color": "#333"
                        })
                        $(box.children[2]).css({
                            "cursor": "pointer",
                            "color": "#333"
                        })
                        if (box.children[1].value < setMin) {
                            box.children[1].value = setMin;
                        }
                        if (box.children[1].value > setMax) {
                            box.children[1].value = setMax;
                        }
                    }

                })
                $(box.children[2]).click(function () {

                    if (box.children[1].value == setMax) {
                        $(box.children[2]).css({
                            "cursor": "not-allowed",
                            "color": "#ccc"
                        })
                    } else {
                        box.children[1].value = Number(box.children[1].value) + setInterval;
                        $(box.children[2]).css({
                            "cursor": "pointer",
                            "color": "#333"
                        })
                        $(box.children[0]).css({
                            "cursor": "pointer",
                            "color": "#333"
                        })
                        if (box.children[1].value > setMax) {
                            box.children[1].value = setMax;
                        }
                        if (box.children[1].value < setMin) {
                            box.children[1].value = setMin;
                        }
                    }
                })
                $(box.children[1]).on("blur", function () {
                    if (box.children[1].value > setMax) {
                        box.children[1].value = setMax;
                    }
                    if (box.children[1].value < setMin) {
                        box.children[1].value = setMin
                    }
                    box.children[1].value = Number(box.children[1].value)
                    if ((box.children[1].value) == "NaN") {
                        box.children[1].value = setMin;
                    }

                })
            })
        }
    });
})(jQuery);

number-input.css

.numberInputBox{
    position: relative;
    display: flex;
    justify-content: space-between;
    background: #F1F1F1;
    border: 1px solid #E5E1DB;
    width: 13rem;
    height: 3.8rem;
    text-align: center;
    font-size: 1.7rem;
}
.numberInputBox>.number-input-value{
    width: 40%;
    border: none;
    text-align: center;
}
.numberInputBox>.number-input-add,
.numberInputBox>.number-input-subtract{
    width: 40%;
    border: none;
    text-align: center;
    font-size: 2.5rem;
    cursor: pointer;
}
.numberInputBox>.number-input-add:hover,
.numberInputBox>.number-input-subtract:hover{
    background-color: #f0f0f0;
}

如何使用

<link rel="stylesheet" href="/css/number-input.css')">

<div class="numberInputBox">
   <div class="number-input-subtract">−</div>
     <input class="number-input-value" value="${value.number}"/>
   <div class="number-input-add">+</div>
</div>

<script src="/js/number-input.js')"></script>