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 に答える