我有一些代码,当前循环浏览博客上的帖子,并将它们输出为列表项内的图像,其中包含链接和标题文本(如果存在)。这工作正常,但是当我运行代码并且有照片集帖子时,每个图像和标题都会根据照片博客帖子进行循环。
(因此,如果照片集中有 10 张图像和 1 个标题,则每个图像和标题都会输出 10 次)。
这是我的原始代码,可以运行:
// get tumblr posts and embed them.
var postContent = $('#tumblr-posts');
var getPosts = {};
getPosts.get = function(){
var offSet = href * 10;
$.ajax({
url:"http://api.tumblr.com/v2/blog/jessicaharby.tumblr.com/posts?limit=11",
dataType: 'jsonp',
data: {
api_key: _site._apiKey,
tag: 'news',
offset: offSet
},
success: function(results){
var i = 0;
while (i < results.response.posts.length) {
var type = results.response.posts[i].type;
var photoset = results.response.posts[i].photoset_layout;
if (type == "photo") {
var photos = results.response.posts[i].photos;
var linkURL = results.response.posts[i].post_url;
var caption = results.response.posts[i].caption;
for (var j = 0; j < photos.length; j++) {
var imgURL;
if (photos[j].alt_sizes[1]) {
imgURL = photos[j].alt_sizes[1].url
}else{
continue;
}
postContent.append("<li><img src=" + imgURL + " /><p>" + caption + "</p></li>");
}
i++;
}
console.log(results.response);
postContent.find('a').attr('target','_blank');
}
});
}
getPosts.get();
我一直在尝试编写一个 else if 语句来捕获照片集帖子。它需要完善,但看起来像这样:
else if(photoset != null) {
for (var k = 0; k < photos.length; k++) {
var imgURL;
if (photos[k].alt_sizes[1]) {
imgURL = photos[k].alt_sizes[1].url
}else{
continue;
}
postContent.append("<li><img src=" + imgURL + " /></li>");
}
postContent.append("<li><p>" + caption + "</p></li>");
}else{
console.log('some error')
}
所以它应该在帖子底部吐出所有图像和一个标题(所以我想我需要将这些全部放在一个列表项中)。我只是不是 100% 确定如何完成循环。
另一个问题是,如果我编写一个 if/else if 我认为使用当前代码,第一个 if 为 true,因此帖子可能会重复,或者 else if 可能会被忽略。
我有两个 fiddle 可以进行实验/ fork 等;
1) http://jsfiddle.net/lharby/bLveggwk/1/循环浏览所有帖子
2) http://jsfiddle.net/lharby/bLveggwk/3/仅循环浏览照片集帖子。
抱歉,这不是最好的问题。如果我不清楚,如果有帮助的话我可以画图!
编辑
决定制作图像:
最佳答案
我不确定我是否很好地理解了这个问题,顺便说一句这个解决方案 http://jsfiddle.net/1bLrocj1/有效吗?
重要部分:
var set = [];
while (i < results.response.posts.length) {
var type = results.response.posts[i].type;
var photoset = results.response.posts[i].photoset_layout;
if (photoset != null) {
var photos = results.response.posts[i].photos;
var linkURL = results.response.posts[i].post_url;
var caption = results.response.posts[i].caption;
for (var j = 0; j < photos.length; j++) {
var imgURL;
if (photos[j].alt_sizes[1]) {
imgURL = photos[j].alt_sizes[1].url
} else {
continue;
}
set.push("<li><img src=" + imgURL + " /></li>");
}
if (caption) {
set.push("<li><p>" + caption + "</p></li>");
var subUl = document.createElement("ul");
for (var k = 0; k < set.length; k++) {
$(subUl).append(set[k]);
}
postContent.append(subUl);
set.length = 0;
}
} else {
console.log('some error')
}
i++;
}
CSS:
ul li {
padding:20px;
float:left;
max-width:550px;
background:#FFF;
}
ul li:last-child {
margin:0 1px 30px 0;
}
关于javascript - 通过 API 获取 tumblr 照片帖子内容,但对于照片集帖子的排列方式有所不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30482675/