GetJSON 并使用“显示更多”链接

发布于 2024-11-16 10:49:24 字数 593 浏览 2 评论 0原文

我正在使用 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);

    });
});

但是，我想做的与 facebook 在其社交插件中所做的类似，它以 5 开头条目，并有一个“显示更多”链接，单击该链接后，会显示另外 5 个条目。

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

谢谢

原文

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

      $(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.

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

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

波浪屿的海角声 2024-11-23 10:49:24

嗯，当然有。您是否想在用户点击“更多链接”时获取其他结果以节省带宽，还是可以同时获取？ （异步与同步）

这个答案考虑粗体文本：

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

哦，检查代码中的该行，您有一个语法错误和一个不匹配的 div。另外，您应该在 HTML 元素的属性周围添加引号。

为了在单击更多链接时显示链接，您可以执行以下操作：

$('.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
});

上面带有父内容的部分适用于当您有多个此类结果列表时的情况在同一页上，您需要将它们分开。如果您不需要它，这里有一个更简单的变体：

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

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)

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.

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
});

回复收藏 0 原文

~没有更多了~