AJAXで取得したデータを後で使用するために保存する方法

Question

画像の複数のサムネイルでdivを開くアプリケーションがあります。画像をクリックすると、新しいdivがフルサイズの画像で開き、divは画像と同じ幅と高さになります。

phpファイルから、私はいくつかのパラメータでオブジェクトを検索します。 thumbWidth/thumbHeightおよびwidth/height。私がする必要があるのは、正しいサイズのdivを開くことができるように、すべての画像の幅と高さを保存することです。それを行う最善の方法は何ですか？私は多次元配列に幅と高さを格納することができたと思いますが、もっと良い方法があると思いますか？

以下のコードでわかるように、私は例えば保存しようとしました。変数 'imgWidth'のthis.widthをイベントに適用しますが、すべての画像が最後に取得された幅と高さを取得するため、これは機能しません。

$.getJSON('...getJSONThumbs.php', function(json) { 
    $.each(json, function() { 

     if (this.thumbWidth > maxWidth){ 
      maxWidth = this.thumbWidth; 
     } 

     if (this.thumbHeight > maxHeight){ 
      maxHeight = this.thumbHeight; 
     } 

     var box = $('<div/>', { 
      'class': 'imgDiv', 
      'width': maxWidth, 
      'height': maxHeight, 
     }).appendTo('.imageArea:last'); 

     var a = $('<a/>', { 
      'href': '#', 
     }).appendTo(box) 

     var img = $('<img/>', { 
      'src': 'pics/' + this.fileName, 
      'width': this.thumbWidth, 
      'height': this.thumbHeight, 
     }).appendTo(a); 

     imgWidth = this.width; 
     imgHeight = this.height; 

     box.click(function(event) { 
      event.preventDefault(); 
      console(imgWidth + " " + imgHeight); // always the last images width and height 
      $('#desktop').css("background-image", "url(" + img.attr('src') + ")"); 
     }); 

     jQuery(loaderImage).hide(); 
    }); 
}); 

Answer 1

のjQueryは.data()方法を通じて要素にデータを関連付ける方法を提供します。あなたはboxオブジェクトにハンドラをバインドするように、私はこのように、そこにデータを追加することになり

：

box.data('imgWidth', this.width); 

あなたがして値を取得：

var width = box.data('imgWidth'); 

応用あなたのコードに私はなりこれを行う：

var params = this; // for the sake of the example (the current json object) 

var box = $('<div/>', { 
    'class': 'imgDiv', 
    'width': maxWidth, 
    'height': maxHeight, 
}) 
.data('imgSize', params); // save the data to the element 
.appendTo('.imageArea:last'); 

... 

box.click(function(event) { 
    event.preventDefault(); 

    // get back the saved data 
    var savedParams = $(this).data('imgSize'); 
    console(savedParams.width + " " + savedParams.height); 

    $('#desktop').css("background-image", "url(" + img.attr('src') + ")"); 
});