Question

我有一个数字输入框的功能，旁边有+和-按钮，并复制我使用的shopify主题中的代码。但该功能只显示一次。但我需要那些适用于所有产品的产品。

(function ($) {

  $.fn.bootstrapNumber = function (options) {

    var settings = $.extend({
        upClass: 'default',
        downClass: 'default',
        center: true
    }, options);

    return this.each(function (e) {
        var self = $(this);
        var clone = self.clone();

        var min = self.attr('min');
        var max = self.attr('max');

        function setText(n) {
            if ((min && n < min) || (max && n > max)) {
                return false;
            }

            clone.focus().val(n);
            return true;
        }

        var group = $("<div class='input-group'></div>");
        var down = $("<button type='button'>-</button>").attr('class', 'btn btn-' + settings.downClass).click(function () {
            setText(parseInt(clone.val()) - 1);
        });
        var up = $("<button type='button'>+</button>").attr('class', 'btn btn-' + settings.upClass).click(function () {
            setText(parseInt(clone.val()) + 1);
        });
        $("<span class='input-group-btn'></span>").append(down).appendTo(group);
        clone.appendTo(group);
        if (clone) {
            clone.css('text-align', 'center');
        }
        $("<span class='input-group-btn'></span>").append(up).appendTo(group);

        // remove spins from original
        clone.prop('type', 'text').keydown(function (e) {
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                (e.keyCode == 65 && e.ctrlKey === true) ||
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                return;
            }
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }

            var c = String.fromCharCode(e.which);
            var n = parseInt(clone.val() + c);

            //if ((min && n < min) || (max && n > max)) {
            //    e.preventDefault();
            //}
        });

        clone.prop('type', 'text').blur(function (e) {
            var c = String.fromCharCode(e.which);
            var n = parseInt(clone.val() + c);
            if ((min && n < min)) {
                setText(min);
            }
            else if (max && n > max) {
                setText(max);
            }
        });


        self.replaceWith(group);
    });
  };
}(jQuery));

Answer 1

如何初始化该功能？

你的问题肯定在那里...... 因为它使用它：

$('input').bootstrapNumber();

See my Fiddle，其中包含您确切的未经修改的脚本。

输入数字部分功能仅适用一次

1 个答案: