CODEWITHSUNDEEP
javascriptjquery
Akin Dönmez
Akin Dönmez

Reputation: 363

Javascript number picker function

i have a number picker with a function which works perfectly. But whenever i want to have 3 number pickers which use the same function, they all function together (i mean when i press up, all three is rising the numbers). How can i make all three number pickers function independently from each other with using just one function ?

(this example is for one number picker. The function is working but i need 2 more number pickers to use this function but work independently from each other)

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

Upvotes: 0

Views: 405

Answers (2)

user2434658
user2434658

Reputation:

Changing your code to this worked fine for me

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

Upvotes: 1

Indiana Kernick
Indiana Kernick

Reputation: 5331

You could copy the function using .concat() so that you have multiple instances

Upvotes: 0

Related Questions