jquery - 使用网格系统构建 jQuery Mobile 照片库

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";                
            }
        } 
    }