Как хранить данные, полученные через AJAX для последующего использования - PullRequest
Новая
       4

Как хранить данные, полученные через AJAX для последующего использования

1 голос
/ 28 декабря 2011

У меня есть приложение, которое открывает div с несколькими миниатюрами изображений. При нажатии на изображение открывается новый div с изображением в полном размере, и div должен иметь ту же ширину и высоту, что и изображение.

Из php-файла я получаю объекты с несколькими параметрами, например. thumbWidth / thumbHeight и width / height. Что мне нужно сделать, это сохранить ширину и высоту для каждого изображения, чтобы я мог открыть 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();
    });
});

1 Ответ

2 голосов
/ 28 декабря 2011

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