0

我正在尝试自定义一个插件，该插件使用以下功能呈现 Tumblr 帖子的图像。

到目前为止，如果有 2 个或更多图像，我只设法将 .photoset 类添加到照片帖子的 ul 中。

function getImages(post) {
    //        console.log(post)
    var html = [];
    html.push("<ul class='tumblr_post_images'>")
    $.each(post.photos, function (i, photo) {
        html.push('<li class="photo"><img src=' + photo.alt_sizes[0].url + '></li>')            
    })

    $('.post_photo ul').has('li:nth-child(n+2)').addClass("photoset"); 

    html.push("</ul>")

    return html.join("");               
};

理想情况下，我希望它仅在帖子中有超过 2 张图像时才呈现 ul，以便标记干净。我尝试了一些条件语句，但我无法让它工作。任何帮助都感激不尽。

更新 感谢 TJ Crowders 的回答，我设法找到了解决问题的方法。这是有效的代码：

    //Function to retrieve all the images from the post. This builds an array which is then returned as html list of images.
       function getImages(post) {
var html = [];

// Get the HTML
if (post.photos.length === 1) {
    $.each(post.photos, function (i, photo) {
              html.push('<img src=' + photo.alt_sizes[0].url + '>')
                    })}
                else {
        // More than one
        html.push("<ul class='photoset'>")
        $.each(post.photos, function (i, photo) {
            html.push('<li class="photo"><img src=' + photo.alt_sizes[0].url + '></li>')            
        });
        html.push("</ul>");
    }
          return html.join("");
       }

更新 2 TJ Crowders 的原始答案中有一个错误。他修复了它，现在他的答案有效！谢谢！

4

3 回答 3

0

试试这个 $(id).children().length来计算子元素的数量谢谢

于 2013-07-21T09:53:42.550 回答
0

基本上我只想在照片帖子中有 2 个或更多图像时创建一个 ul

然后简单地检查post.photos.length：

function getImages(post) {
    var html = [];

    // Get the HTML
    if (post.photos.length) {
        // We have at least one image
        if (post.photos.length === 1) {
            // Just one image
            html.push('<img src=' + post.photos[0].alt_sizes[0].url + '>');
        }
        else {
            // More than one
            html.push("<ul class='tumblr_post_images'>")
            $.each(post.photos, function (i, photo) {
                html.push('<li class="photo"><img src=' + photo.alt_sizes[0].url + '></li>')            
            });
            html.push("</ul>");
        }
    }

    // Add or remove the class depending on whether we have more than one    
    $('.post_photo ul').toggleClass("photoset", post.photos.length > 1); 

    // Return the HTML (why are we returning it rather than putting it in the element here?)
    return html.join("");               
}

另请注意，我添加了缺少的分号（强烈建议不要依赖自动分号插入的恐怖）并删除了不必要的分号（函数声明是声明，而不是表达式；;它们的末尾没有）。

于 2013-07-21T09:55:34.730 回答
0

尝试$('.post_photo ul').has('li:nth-child(n+2)').addClass("photoset");用此代码替换：

if (post.length == 2) {
    $('.post_photo ul').addClass("photoset")
}
于 2013-07-21T09:44:48.240 回答