Javascript 使用tumblrapi调用文本帖子中的图像:partdeux
我讨厌老是问一些基本的问题,看起来像个十足的白痴,但在我能坐下来掌握Javascript和jQuery之前,我必须依靠你们这些善良慷慨的人 我把Tumblr帖子称为tagged _featured,如果是包含图片的文本帖子,我会在侧边栏中显示它们和图片。唯一的问题是图像本身没有链接。没什么大不了的,但有点不直观。我该如何解决这个问题 以及守则:Javascript 使用tumblrapi调用文本帖子中的图像:partdeux,javascript,jquery,image,tumblr,Javascript,Jquery,Image,Tumblr,我讨厌老是问一些基本的问题,看起来像个十足的白痴,但在我能坐下来掌握Javascript和jQuery之前,我必须依靠你们这些善良慷慨的人 我把Tumblr帖子称为tagged _featured,如果是包含图片的文本帖子,我会在侧边栏中显示它们和图片。唯一的问题是图像本身没有链接。没什么大不了的,但有点不直观。我该如何解决这个问题 以及守则: /* TUMBLR FEATURED POSTS SCRIPT Automatically gets all posts tagged
/*
TUMBLR FEATURED POSTS SCRIPT
Automatically gets all posts tagged with "featured" and lists them
REQUIRES JQUERY!
--------------------------------------
Created by james <at> bandit.co.nz
http://blog.bandit.co.nz
Some code borrowed from Jacob DeHart's AJAX Search:
http://blog.bandit.co.nz/post/80415548/tumblr-ajax-inline-search
*/
Featured = {
'apiNum' : 50, // how many posts to read
'listId' : '_featured', // the id of the ul to write to
'tagName' : '_featured', // the name of the tag we're searching for
'linkAppend' : '', // html to append to the end of each linked post
'postDB' : [],
'listPos' : 0,
'doList' : function (where) {
var li; var ul = $('#'+where);
var titles = {"link":"link-text", "photo":"photo-caption", "quote":"quote-text", "regular":"regular-title", "video":"video-caption"}
// cycle through post database
pcount = Featured.postDB.length;
for(i=Featured.listPos;i<pcount;i++) {
p = Featured.postDB[i];
if(p[titles[p.type]] != '') titlestr = p[titles[p.type]].replace(/<\/?[^>]+>/gi, '');
else titlestr = p['url'];
li = document.createElement('li');
$(li).append($(p['regular-body']).find('img')[0])
.append('<div class="featurelink"><a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+titlestr+Featured.linkAppend+'</a></div>');
ul.append(li);
Featured.listPos = pcount;
}
},
'getData' : function() {
$.get('/api/read/json?num='+Featured.apiNum+'&tagged='+Featured.tagName,
function(data) {
eval(data);
for(i=0;i<tumblr_api_read.posts.length;i++) {
Featured.postDB.push(tumblr_api_read.posts[i]);
Featured.doList(Featured.listId);
}
}
);
}
};
$(document).ready(function(){
Featured.getData();
});
一如既往,任何帮助都会得到我永恒的感激 您的问题是,当您希望将图像添加到将在其中的时,您正在将图像添加到。从以下位置更改列表项生成器:
li = document.createElement('li');
$(li).append($(p['regular-body']).find('img')[0])
.append('<div class="featurelink"><a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+titlestr+Featured.linkAppend+'</a></div>');
ul.append(li);
使用适当的CSS选择器对其进行本地化。嘿,感谢您的快速回复。这就是诀窍。还有一个问题:在链接文本周围放置一个div,这样我就可以独立于图像设置样式,这是什么正确的方法?我知道我可以只用CSS来完成,但是代码最终会变得多余。这是我想避免的。您可能希望在文本周围加上一个空格:>'+titlestr+Featured.linkAppend+'。然后,您可以选择带有.featureImage span的span,或者如果需要更简单的选择器,可以为span指定一个类.Perfect。我必须说,最重要的是,最终让我头疼的是一些小格式问题。正确放置逗号的力量,嗯?再次感谢,你为我节省了很多时间。
$li = $('<li>');
$li.append('<div class="featurelink"><a class="' + p.type + '" href="' + p["url-with-slug"] + '">' + titlestr + Featured.linkAppend + '</a></div>');
$li.find('a').prepend($(p['regular-body']).find('img')[0]); // The important part
ul.append($li);
a { display: block; }
a img { display: block; }