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

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

1 个答案: