GetJSON и использование ссылки Показать больше - PullRequest
Новая
       2

GetJSON и использование ссылки Показать больше

0 голосов
/ 20 июня 2011

Я использую getJSON для получения данных из API страниц facebook, и он работает просто отлично, используя этот код: 

      $(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 записей.

Есть ли способ сделать это, изменив код, который у меня есть?

Спасибо

1 Ответ

1 голос
/ 20 июня 2011

Ну, конечно, есть.Вы хотите получить другие результаты, когда пользователь нажимает «дополнительную ссылку», чтобы сохранить пропускную способность, или это ОК, чтобы получить ее одновременно ? (async vs sync)

Этот ответ учитывает жирный текст: 

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