0

我正在尝试使用 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");
        }
    }
});
4

2 回答 2

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";                
            }
        } 
    }
于 2013-07-05T09:05:19.933 回答
0

这是通过仅设置脊柱的一侧，“ui-block-a”。要拥有第二列，还应在 div 上设置“ui-block-b”。

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

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

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

于 2013-07-05T00:21:55.657 回答