GetJSON并使用Show More链接

I'm using getJSON to get data from the facebook pages api, and it works just fine, using this code:

我正在使用getJSON从facebook页面api获取数据,并且使用此代码它可以正常工作:

      $(document).ready(function(){

    $.getJSON('url',function(json){

        $.each(json.data,function(i,fb){

           var output='';

        //here I add to output, as this example line:


            output += '<div"><a href="http://www.facebook.com/profile.php?id='+fb.from.id+'>'+fb.from.name+'</a>';


           $("#results").append(output);

    });
});

However, what I'd like to do is similar to what facebook does in it's social plug in where it starts off with 5 entries and has a Show More link, which when clicked, brings in 5 more entries.

但是,我想要做的是类似于facebook在其社交插件中所做的事情,它以5个条目开始,并且有一个Show More链接,点击后会带来5个以上的条目。

Is there a way to do this by altering the code I have?

有没有办法通过改变我的代码来做到这一点?

Thanks

1 个解决方案

#1

Well, sure there is. Do you want to fetch the other results when a user clicks the "more link" to save bandwidth or is it OK to fetch it at the same time? (async vs sync)

嗯,确定有。当用户单击“更多链接”以节省带宽或是否可以同时获取时,是否要获取其他结果? (异步vs同步)

This answer considers the bold text:

这个答案考虑粗体文字:

output += '<div' + (i >= 5 ? ' style="display: none;"' : '') + '><a href="http://www.facebook.com/profile.php?id=' + fb.from.id +'>'+fb.from.name+'</a></div>';

Oh, and check that line in your code, you had a syntax error and an unmatched div. Also you should have quotation marks around your HTML element's attributes.

哦,并检查代码中的那一行,你有一个语法错误和一个不匹配的div。您还应该在HTML元素的属性周围加上引号。

For showing the links when the more link is clicked you could do something like:

要在单击更多链接时显示链接,您可以执行以下操作:

$('.more').click(function() {
    $(this).hide();
    // Find the closest ancestor which is a parent of both
    // the more link and the actual results list
    var $parent = $(this).closest('.parentSelector');
    $('.listSelector', $parent).children().show();
    return false; // Don't follow the link
});

The parts with the parent stuff above is for the case when you have multiple such results list on the same page and you need to separate them. If you don't need it, here is a simpler variant:

具有上述父项的部分适用于在同一页面上有多个此类结果列表并且需要将它们分开的情况。如果您不需要它,这里有一个更简单的变体:

$('.more').click(function() {
    $(this).hide();
    $('#results').children().show(); // Show all other list items
    return false; // Don't follow the link
});

#1