jquery - 多个独特的点击事件

Question

我真的不知道如何表达这个问题——即使是标题也可能有点误导。

场景:当单击具有特定类的元素时，我使用 jquery 创建一个函数。

单击元素时，它会在参数传递的元素中查找图像，并使用 animate() 调整图像大小(增大)。

这是我一起破解的代码:

            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 和 objwidth 是图像的尺寸。

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>

问题:由于每当单击发生时计数器就会递增，因此当我有多个图像时，我想调整大小而不是从 var counter = 2; 开始它只是从增量中恢复......这是可以理解的，但是，我怎样才能阻止这种情况发生呢？每个元素都有一个独特的计数器？我怎样才能创建它？

一如既往地感谢您的帮助。

Answer 1

您可以使用 jQuery data API存储 DOM 元素的元数据。

例如:

$(".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'));
});​

您可以在 jsFiddle I just made for testing 上查看这项工作。 .