Question

我的目标=通过ajax检索项目列表，在页面加载时显示n个幻灯片，然后在每次点击“加载项目”时附加n个项目，直到显示所有项目，此时显示“不再左”等内容

我已经获得了ajax调用并附加了独立工作的项目，但需要帮助才能使它们协同工作。

这是我的ajax调用，我把它放在一个名为populateBlocks的函数中：

function populateBlocks(position,page_size) {

$.ajax({
    type: "GET",
    url: "/portfolio.xml",
    dataType: "xml",
    success: function(xml) {
      var title, url, block_count;
      block_count = $(xml).find('block').length;
      $(xml).find('block').slice(position,position+page_size).each(function(){
         title = $(this).find('title').text();
         url = $(this).find('url').text();
         $('div.section').append('<div class="item"><a href="' + url + '"><img src="' + url + '" alt="" /><span class="title"><span class="text">' + title + '</span></span></a></div>');
      });
      $('.section').masonry('reload');
    }
    });      
}

以下是文档准备好的内容，包括“加载项”点击的处理程序：

$(document).ready(function() {

var position;
var page_size;

populateBlocks(0,9);

  $('#append2').click(function(position){
    $boxes = populateBlocks(9,9);
    $('#container').append( $boxes ).masonry( 'appended', $boxes );
  });
});

我知道代码可能有各种各样的错误。我正在尝试使用函数参数，并在点击后增加位置和page_size变量，但无法获得任何乐趣。

Answer 1

尝试替换此行：

$('#container').append( $boxes ).masonry( 'appended', $boxes );

用这个：

jQuery("#content").append($boxes).masonry( 'reload' );

jQuery Masonry附加'加载更多'ajax调用的项目

1 个答案: