Question

I have the following code (found here) that works fine on it’s own

<a id="inc">Good</a>
<a id="dec">Bad</a>
<input type="text" name="qty" value="0" readonly="readonly" />

<script type="text/javascript">
  $(function(){
    $("#inc").click(function(){
      $(":text[name='qty']").val( Number($(":text[name='qty']").val()) + 1 );
    });
    $("#dec").click(function(){
      $(":text[name='qty']").val( Number($(":text[name='qty']").val()) - 1 );
    });
  });
</script>

I’m having trouble finding the most efficient way to use this code in a case where you would have multiple instances of it on the same page. Obviously I would change the ID’s to classes, but how do I make the anchors, when clicked only affect the text input nearest to it? Is the :next selector applicable here?
thx!

Answer 1

Use a class instead of an ID for each item you want to find, group them in a common container div, find the input that is in the same container as the inc/dec button that was pressed and operate on it.

This block of code will work for all the inc/dec/input sets you have on the page as long as you group each in a common container div.

<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>
<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>
<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>

<script type="text/javascript">
  $(function(){
    $(".inc").click(function(){
        var input = $(this).siblings(".qty");
        input.val(parseInt(input.val(), 10) + 1));
    });
    $(".dec").click(function(){
        var input = $(this).siblings(".qty");
        input.val(parseInt(input.val(), 10) - 1);
    });
  });
</script>