如何存储通过AJAX检索数据供以后使用

Question

我有一个应用程序，打开一个div与几个缩略图的图像。当点击一个图像时，一个新的div将打开全尺寸的图像，div的宽度和高度应与图像相同。

从php文件我回顾了几个参数的对象，例如。 thumbWidth/thumbHeight和宽度/高度。我需要做的是存储每个图像的宽度和高度，以便我可以打开正确大小的div。什么是最好的方式来做到这一点？我想我可以将宽度和高度存储在多维数组中，但我想有更好的方法吗？

正如你可以在下面的代码中看到的，我尝试存储例如。 this.width在变量'imgWidth'中并将其应用于事件，但每个图像都会获取最后一次检索的宽度和高度，因此不起作用。

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