javascript - JavaScript 中的数字选择器

Question

我有两个数字选择器，其中一个位于另一个之下，但我需要将它们并排放置，但我无法成功。数字选择器也以某种方式连接起来。当我按下时，它们都会向上移动。这可能是因为在单击函数上调用类微调器，但我不知道如何将它们分开而不为每个函数编写函数。

         $('<br/>').appendTo(tabPage); 
         $('<br/>').appendTo(tabPage); 
        var tableSpinnerRow = $('<div class="row"/>').appendTo(tabPage);
        var spinnerContainer = $('<div class=" container col-xs-12 "/>').appendTo(tableSpinnerRow);
        var spinner1 = $('<div class=" input-group spinner col-xs-2"/>').appendTo(spinnerContainer);
        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);
        $('<br/>').appendTo(tabPage); 
        var spinnerContainer2 = $('<div class=" container col-xs-12"/>').appendTo(tableSpinnerRow);
        var spinner2 = $('<div class=" input-group spinner col-xs-2"/>').appendTo(spinnerContainer2);
        var input2 = $('<input type="text" class="form-control" value="1"/>').appendTo(spinner2);
        var input_Group2 = $('<div class="input-group-btn-vertical"/>').appendTo(spinner2);
        var buttonPlus2 = $('<button class="btn btn-default"><i class="fa fa-caret-up"></i></button>').appendTo(input_Group2);
        var buttonMinus2 = $('<button class="btn btn-default"><i class="fa fa-caret-down"></i></button>').appendTo(input_Group2);


     (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

如果没有 fiddle 、页面链接或 CSS，很难提供有关对齐问题的反馈......

但是，这就是我如何分离两个微调器单击处理程序，而不必为它们编写单独的函数。

$('.spinner').click(function(){
    $(this).val( parseInt($(this).find('input').val(), 10) + 1);
    $(this).slideUp();
});