我有一个jQuery日历,每天都链接到一个带有Facebook评论插件的动态页面。现在我可以通过这样调用Facebook的API获得评论数量:
$(".comm").each(function(){
var root = "https://graph.facebook.com/?ids=";
var ids = "http://root.toUrl.com/";
var callback = "&callback=?";
var date = $(this).attr('href');
var fecha = root + ids + date + callback;
$.getJSON(fecha, function(data){
for(comments_num in data){
var user = data[comments_num];
$('.iframecont').append(user.comments);
console.log(user.comments);
}
});
});
Facebook允许您一次只通过一个URL通过Graph API获取评论数。因此,对于包含30天的日历,您必须调用30个网址才能获得每个网址响应。例如,要检索2011年5月5日的评论数,网址将为https://graph.facebook.com/?ids=http://root.toUrl.com/phpDynamicpageGenerator.php?date=2011-5-3&callback=?。我必须每天拨打相应的电话,解码答案并将结果附加到每天div内的p。
数据返回:
{ "http://example.com/": { "id": "http://example.com/", "shares": 72603, "comments": 14483 } }
User.comments就是14483。
此代码正确检索数据,但现在每天'.iframecont'连续显示所有json响应,如下所示:62212221222...
如何将每个回复分发到其对应的div,以便将正确的评论数分配给正确的日期?
提前致谢。
答案 0 :(得分:0)
假设以下html,
<div> <!-- div n-1 -->
<a href="someurl" class="comm">some text</a>
<p class="iframecont"></p>
</div>
<div> <!-- div n -->
<a href="someurl" class="comm">some text</a>
<p class="iframecont"></p>
</div>
<div> <!-- div n+1 -->
<a href="someurl" class="comm">some text</a>
<p class="iframecont"></p>
</div>
对于每个具有“commm”类的锚标记,您将提取属性“href”的值并进行api调用。 api调用返回一些json数据。你以某种方式解析它[看着你说的json返回,我不明白为什么你需要一个for循环以及为什么你在每次迭代时追加;但我现在会忽略它。现在您需要将其附加到相应的段落标记。
确定。所以重写你的功能如下
$(".comm").each(function(){
var root = "https://graph.facebook.com/?ids=";
var ids = "http://root.toUrl.com/";
var callback = "&callback=?";
var date = $(this).attr('href');
// important. read http://bonsaiden.github.com/JavaScript-Garden/#function.this
var $that = $(this);
var fecha = root + ids + date + callback;
$.getJSON(fecha, function(data){
// why is this for loop needed??
for(comments_num in data){
var user = data[comments_num];
console.log(user.comments);
$that.parent().children("p.iframecont").append("num_of_comments");
// OR you can use this
// $that.siblings("p.iframecont").append("num_of_comments");
// what to use will be decided by the exact structure of your html.
// check out http://api.jquery.com/category/traversing/
// in my example, either method will work
}
});
});
注意事项。 $这只是另一个javascript变量。我们在$前面加上前缀来表示它的jquery对象。它的正常惯例。我们缓存对我们进行api调用的元素的引用。现在当回调函数执行时,使用缓存的$ that,我们找到相应的段落标记。在我的示例中,<a>
和<p>
都是<div>
代码的子代。
您的html结构可能有所不同,因此请参阅http://api.jquery.com/category/traversing/并相应地修改遍历。