Question

I don’t really have an idea on how to phrase this question–even the title may be a bit misleading.

Scenario:
I’m using jquery to create a function when an element with the specific class is clicked.

When the element is clicked, it looks for an image in the element passed by the parameters and resizes (increase) the image using animate().

Here’s the code I hacked together:

            var counter = 2;
          $(".bigger").click(function(event,ui) {
                var objid       = $(this).attr("rel"); 
                var mainid      = $(this).attr("id"); 
                var imageid = "#"+objid+""; 
                $(imageid).find('img').animate({ height:objheight * counter,width: objwidth * counter}).css({ height: objheight * counter, width: objwidth * counter });                
                    counter++;


            });

objheight and objwidth are the dimensions of the image.

HTML

<li class="ui-widget-content" id="obj1">
<img src="elements/pic1.png" id="obj_1" class="ui-widget-content"  width="96" height="72" />
<div class="tools"><a class="ui-icon sizeup" rel="obj1"  id="obj_1"  href=""><span></span></a>

Problem:
Since the counter is incremented whenever the click happens, when I have multiple images I want to resize instead of starting from var counter = 2; It just picks up from the increment..which is understandable, however, how can I stop this from happening? A unique counter for each element? How can I create that?

Thanks for any help as always.

Answer 1

You can use the jQuery data API to store metadata for DOM elements.

For example:

$(".bigger").click(function(event,ui) {
  var objid       = $(this).attr("rel"); 
  var mainid      = $(this).attr("id"); 
  var imageid = "#"+objid; 
  var image = $(imageid).find('img');
  var counter = (image.data('counter') || 1) + 1;
  image.data('counter', counter);
  image.animate({ height: objheight * counter,width: objwidth * counter});
  $('#result').html(image.data('counter'));
});​

You can check this work on the jsFiddle I just made for testing.