1

私の目的= ajaxを介してアイテムのリストを取得し、ページの読み込み時にn枚のスライドを表示し、すべてのアイテムが表示されるまで「アイテムの読み込み」をクリックするたびにn個のアイテムを追加し、その時点で「もう残っていません」などを表示します.

ajax 呼び出しと追加項目が独立して動作していますが、それらを連携させるには助けが必要です。

populateBlocks という関数内に配置した ajax 呼び出しを次に示します。

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 に答える