1

我的目标=通过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 );
  });
});

我知道代码可能有各种各样的错误。我正在尝试使用函数参数，并在单击后增加 position 和 page_size 变量，但没有任何乐趣。

4

1 回答 1

1

尝试替换这一行：

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

有了这个：

jQuery("#content").append($boxes).masonry( 'reload' );
于 2012-12-03T11:42:51.723 回答