问题描述
|
为PHPBB制作了一些BBcode,以允许用户发布带有特定标签的flickr图片。
线程中的每个photo div必须是唯一的,并且在加载线程时会加载图像。
当涉及到唯一的DIV时,我很想办法在插入BBcode时将唯一命名的元素插入DOM中,然后加载图片。看来我不能在BBcode中使用PHP,也不能在模板标签中使用PHP-如果我可以很容易地从帖子ID和flickr标签中制作出一个独特的照片元素,那我就可以笑了。哦,我不能碰模板。全部都在BBcode中。
因此,这是我制作唯一ID的方法:
var flickrUser = \"{URL}\".split(\"/\")[4];
var tag = \"{URL}\".split(\"/\")[6];
var photoDIV = flickrUser + \"-\" + \"tag\";
或者...有一个元素可以在上面使用唯一的帖子ID调用:
<div id=\"p61789\" class=\"post bg2\">
我试过了
var postnumber=$(this).closest(\'div[class^=\"post\"]\').attr(\'id\');
但是它似乎总是在页面上返回FirsT匹配的div,而不是将NEAREST返回到BBcode的位置。此元素是下面的两个“ divs”
<div class = \"content\">
在用户发布区域下方是:
<div id=\"sig61789\" class=\"signature\">
因此,我完全陷入困境的地方是导航到prev()或closet()或parent(),或者实际上是从我所在的位置开始的任何地方,都没有指向引用的$(this)链接。
所以不应该这样:
$(this).prev(\'content\').html(\'<ul class=\"thumbs\" id=photoDIV></ul>\');
甚至
$(this).html(\'<ul class=\"thumbs\" id=photoDIV></ul>\');
工作?每当我认为我了解jquery时,一切都会再次变得朦胧...
编辑:为Pointy添加了更多详细信息:
<div id=\"p63167\" class=\"post bg2 online\">
<div class=\"inner\">
<span class=\"corners-top\">
<span></span>
</span>
<div class=\"postbody\">
<ul class=\"profile-icons\">
<li class=\"edit-icon\">
<a href=\"posting.PHP\" title=\"Edit post\">
<span>Edit post</span>
</a>
</li>
<li class=\"delete-icon\">
<a href=\"posting.PHP\" title=\"Delete post\">
<span>Delete post</span>
</a>
</li>
<li class=\"report-icon\">
<a href=\"report.PHP\" title=\"Report this post\">
<span>Report this post</span>
</a>
</li>
<li class=\"info-icon\">
<a href=\"mcp.PHP\" title=\"information\">
<span>information</span>
</a>
</li>
<li class=\"quote-icon\">
<a href=\"posting.PHP\" title=\"Reply with quote\">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class=\"first\">
<a href=\"#p63167\">Re: Testing new bbcode - ignore</a>
</h3>
<p class=\"author\">
<a href=\"viewtopic.PHP\">
<img src=\"\" alt=\"Post\" title=\"Post\" />
</a>by
<strong>
<a href=\"memberlist.PHP\">xxx</a>
</strong>» 13 Jun 2011 14:33</p>
<div class=\"content\">
<script>var
APIkey=\"xxx\";head.js(\"/forum/jflickrFeed/jflickrFeed.min.js\",\"http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js\",function(){var
flickrUser=\"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/\".split(\"/\")[4];var
tag=\"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/\".split(\"/\")[6];var
photoDIV=flickrUser+\"-\"+\"tag\";$(this).html(\'
<ul class=\"thumbs\" id=\"photoDIV\">
</ul>\');$.getJSON(\"http://www.flickr.com/services/rest/?jsoncallback=?\",{method:\"flickr.urls.lookupUser\",url:\"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/\",format:\"json\",api_key:APIkey},function(data){$(\'#cBox\').jflickrFeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:\'
<li>\'+\'
<a rel=\"colorBox\" href=\"{{image}}\" title=\"{{title}}\">\'+\'
<img src=\"{{image_m}}\" alt=\"{{title}}\" />\'+\'</a>\'+\'</li>\'},function(data){$(\'#cBox
a\').colorBox();});});$.lazy([{src:\'/forum/jflickrFeed/colorBox/colorBox/jquery.colorBox-min.js\',name:\'colorBox\',dependencies:{css:[\'/forum/jflickrFeed/jflickrFeed.css\',\'/forum/jflickrFeed/colorBox/example1/colorBox.css\']}}]);});</script>
<ul id=\"cBox\" class=\"thumbs\"></ul>
</div>
<div id=\"sig63167\" class=\"signature\"></div>
</div>
</div>
</div>
解决方法
问题是您假设在脚本块中执行时的“ 8”上下文是脚本块本身,这是不正确的。如果没有显式给出上下文,则您的上下文是
window
DOM元素。您是否有任何原因无法将此代码移至页面级别,并在页面加载时初始化所有帖子?
$(function() {
$(\'.post\').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}
, 您是否尝试过Javascript的DOM函数添加它?
http://www.javascriptkit.com/javatutors/dom2.shtml
例如,要在当前脚本之后插入ID为“ \ script1 \”的脚本:
document.getElementById(\"script1\").parentNode.appendChild( newelement );
您也可以添加原始html,只需设置新元素的innerHTML即可。