2

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

场景： 当单击具有特定类的元素时，我正在使用 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; 它只是从增量中拾起..这是可以理解的，但是，我怎样才能阻止这种情况发生？每个元素都有一个独特的计数器？我怎样才能创造它？

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

4

2 回答 2

1

您可以使用 jQuery数据 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 上检查这项工作。

于 2012-05-25T22:45:11.937 回答
-1

您的代码中有一个错误，使用相同的 ID img 和具有 id="obj_1" 是非法的...您可以将其替换为 data-id。我使用了先前的答案，以表明您可以直接在 html 代码中使用数据设置来预定义数据。

http://jsfiddle.net/SqarV/

于 2012-05-26T00:42:58.073 回答