Question

我正在尝试使用jQuery Mobile（1.3.1）在两列网格中显示照片。我正在使用Ajax从我的API中检索照片。如何在渲染时确保网格中的div具有正确的类？下面，我需要将类旋转到ui-block-a和ui-block-b。提前谢谢！

$.ajax({
    url: server_url + "get-photos", 
    type: "post", 
    data: 'album_id=' + album_id, 
    dataType: 'json', 
    crossDomain: true,  
    error: function() {
        $('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
    },
    success: function(data) {
        if (data.response === "true") {
            $("#album_photos").append('<div class="ui-grid-a">');
            $.each(data, function(i, item) {
                $("#album_photos").append('<div class="ui-block-a"><img src="' + data.photo_url + album_user + '/thumbnail/' + data.album_photo + '" width="75px" /></div>');
            });
            $("#album_photos").append('</div>');
        } else {
            $('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
        }
    }
});

Answer 1

只需修改成功功能即可切换，

success: function(data) {
        if (data.response === "true") {
            $("#album_photos").append('<div class="ui-grid-a">');
            var imgClass = "ui-block-a";
            $.each(data, function(i, item) {
                $("#album_photos").append('<div class="'+imgClass+'"><img src="' + data.photo_url + album_user + '/thumbnail/' + data.album_photo + '" width="75px" /></div>');
            });
            $("#album_photos").append('</div>');

            if(imgClass == "ui-block-a") {
                      imgClass = "ui-block-b";
            } else {
                      imgClass = "ui-block-a";                
            }
        } 
    }

Answer 2

这只是设置脊柱的一侧，“ui-block-a”。要使第二列也应在div上设置“ui-block-b”。

我建议你计算返回的umagens的数量并分成两个数组。

有两个循环，每个数组一个，你填一个列“ui-block-a”，另一个填充“ui-block-b”

或者，如果你不想设置两个数组teporarios不使用$。每个，使用一个简单的FOR循环使得第一个开始为一半并将结果放在第一列“ui-block-a”中，并将第二个循环放在第二列“ui-block-b”

使用网格系统构建jQuery Mobile Photo Gallery

2 个答案: