Question

我有一个数字选择器，功能完美。但每当我想拥有3个使用相同功能的数字选择器时，它们都会起作用（我的意思是当我按下时，所有三个都在增加数字）。如何使用一个函数使所有三个数字选择器彼此独立运行？

（这个例子适用于一个号码选择器。该功能正在运行，但我需要2个号码选择器才能使用此功能，但彼此独立工作）

var tableSpinnerRow = $('<div class="row"/>').appendTo(tabPage);
        var spinnerContainer = $('<div class=" container col-xs-12 "/>').appendTo(tableSpinnerRow);
        $('<div class="col-xs-2"><b>Columns: from</b></div>').appendTo(spinnerContainer);
        var a = $('<div class="col-xs-2"/>').appendTo(spinnerContainer);
        var spinner1 = $('<div class=" input-group spinner"/>').appendTo(a);
        var input1 = $('<input type="text" class="form-control " value="1"/>').appendTo(spinner1);
        var input_Group1 = $('<div class="input-group-btn-vertical"/>').appendTo(spinner1);
        var buttonPlus1 = $('<button class="btn btn-default"><i class="fa fa-caret-up"></i></button>').appendTo(input_Group1);
        var buttonMinus1 = $('<button class="btn btn-default"><i class="fa fa-caret-down"></i></button>').appendTo(input_Group1);

 (function ($) {
    $('.spinner .btn:first-of-type').on('click', function() {

    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);

  });
    $('.spinner .btn:last-of-type').on('click', function() {

    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);

  });
})(jQuery);

Answer 1

将代码更改为此对我来说很好

var tableSpinnerRow = $('<div class="row">').appendTo(tabPage);
var spinnerContainer = $('<div class=" container col-xs-12 ">').appendTo(tableSpinnerRow);
$('<div class="col-xs-2"><b>Columns: from</b></div>').appendTo(spinnerContainer);
var a = $('<div class="col-xs-2">').appendTo(spinnerContainer);
var spinner1 = $('<div class=" input-group spinner">').appendTo(a);
var input1 = $('<input type="text" class="form-control " value="1"/>').appendTo(spinner1);
var input_Group1 = $('<div class="input-group-btn-vertical">').appendTo(spinner1);
var buttonPlus1 = $('<button class="plus btn btn-default"><i class="fa fa-caret-up"></i></button>').appendTo(input_Group1);
var buttonMinus1 = $('<button class="minus btn btn-default"><i class="fa fa-caret-down"></i></button>').appendTo(input_Group1);

$('.minus, .plus').on('click', function() {
    var self = $(this);
    var input = self.parents(".input-group:first").find(".form-control");
    input.val(parseInt(input.val()) + (self.hasClass("plus") ? 1 : -1));
});

Answer 2

您可以使用复制功能 .concat（）这样你就有了多个实例

Javascript号码选择器功能

2 个答案: