Javascript数字选择器函数

Javascript number picker function

本文关键字：函数 选择器 数字 Javascript      更新时间：2023-12-16

我有一个数字选择器，它的功能非常好。但是，每当我想有3个使用相同函数的数字选择器时，它们都会一起工作（我的意思是，当我按下时，这三个数字都在上升）。如何使用一个函数使所有三个数字选择器相互独立地工作？

（这个例子是针对一个数字选择器。该功能正在工作，但我需要另外两个数字选择器来使用该功能，但彼此独立工作）

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);

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

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));
});

您可以使用.concat（）以便您有多个实例

相关文章：