Convert jquery function to each

Question

The following function was created to add an up and down button control to an input field. I need this function to work where there are more than one on the same page.

$(document).ready(function() {
    var maxqty = parseInt($('.qty').attr('max'))

    $(".qtyplus").click(function() {
        if($('.qty').val()<maxqty)
            $(":text[name='qty']").val( Number($(":text[name='qty']").val()) + 1 );
    });
    $(".qtyminus").click(function() {
        if($('.qty').val()>1)
            $(":text[name='qty']").val( Number($(":text[name='qty']").val()) - 1 );
    });
});

fiddle is here: http://jsfiddle.net/BhnM7/

Basically need the function to work it there were several div class="qtybox" on the same page

Answer 1

Try this:

$(document).ready(function() {
    var maxqty = parseInt($('.qty').attr('max'))
    $(".qtyplus").click(function() {
        if($(this).parent().prev('.qty').val()<maxqty)
            $(this).parent().prev(":text[name='qty']").val(
                Number($(this).parent().prev(":text[name='qty']").val()) + 1 );
    });
    $(".qtyminus").click(function() {
       if($(this).parent().prev('.qty').val()>1)
           $(this).parent().prev(":text[name='qty']").val( 
              Number($(this).parent().prev(":text[name='qty']").val()) - 1 );
    });
});

Working Demo

Answer 2

Try This, If you really are looking for a function

$(document).ready(function(){
convert("qtyplus", "qtyminus", "qty");

    function convert(plusClass,minusClass,txtBoxClass){
        var maxqty = parseInt($('.'+txtBoxClass).attr('max'));
        $("."+plusClass).click(function(){
     if($('.'+txtBoxClass).val()<maxqty)
     $(':text[name='+txtBoxClass+']').val(Number($(':text[name='+txtBoxClass+']').val()) + 1 );
    });
    $("."+minusClass).click(function(){
        if($('.'+txtBoxClass).val()>1)
      $(':text[name='+txtBoxClass+']').val( Number($(':text[name='+txtBoxClass+']').val()) - 1 );

    });
    }
});

Working Demo: http://jsfiddle.net/hiteshbhilai2010/BhnM7/6/

Answer 3

You can use the each() function.

$(document).ready(function () {
    var maxqty = parseInt($('.qty').attr('max'))

    $(".qtyplus").click(function () {
        $('.qty').each(function () {
            var maxqty = parseInt($(this).attr('max'))
            if ($(this).val() < maxqty) {
                $(this).val(Number($(this).val()) + 1);
            }
        });
    });
    $(".qtyminus").click(function () {
        $('.qty').each(function () {
            if ($(this).val() > 1) {
                $(this).val(Number($(this).val()) - 1);
            }
        });
    });
});

jsfiddle: http://jsfiddle.net/BhnM7/7/

Answer 4

You can using jQuery's parent() and siblings() functions to find the corresponding input field no matter how many <div> you add.

 $(document).ready(function(){

    $(".qtyplus").click(function(event){
        //Use the jQuery even object to get the button that was just clicked
        //Navigate the DOM tree using parent and siblings functions to find the corresponding input box
        var inputBox = $(event.currentTarget).parent().siblings('.qty')[0];
        var maxqty = parseInt($(inputBox).attr('max'));
        if($(inputBox).val() < maxqty)
             $(inputBox).val( Number($(inputBox).val()) + 1 );
    });

    $(".qtyminus").click(function(event){
        //Use the jQuery even object to get the button that was just clicked
        //Navigate the DOM tree using parent and siblings functions to find the corresponding input box
        var inputBox = $(event.currentTarget).parent().siblings('.qty')[0];
     if($(inputBox).val() > 1)
       $(inputBox).val( Number($(inputBox).val()) -1 );
    });
});

http://jsfiddle.net/smurphy/v9zMK/4/

Answer 5

It is better to use event delegation instead of using each(). You can read more about it here.

Here is how to do it:

$(document).ready(function(){

    $('#qtybox').on('click', '.qtybtn', function(e){
        var $group = $(this).parents('.qty-group');
        var $input = $('.qty', $group);
        var maxValue = parseInt($input.attr('max'));
        var buttonValue = parseInt($(this).val());
        var newValue = parseInt($input.val()) + buttonValue;
        if (newValue <= maxValue && newValue >= 0) {
            $input.val(newValue);
         }
    });

});

The code above will listen to one click event in the #qtybox class and look for all descendants with the .qtybtn class.

You can see a working copy here.