1

这是我到目前为止所拥有的：

$(document).ready(function(){   
  $("#feed-page").load("feed.php #first-feed");

  $('.feed-load').click(function(){   
    $("#feed-page").load("feed.php #second-feed" ,  hideLoading);
    $(".feed-load .button-content").css( "display" , "none" );
    $('.feed-load-img').css( "display" , "block" );
  });

  function hideLoading() {  
    $(".feed-load .button-content").css( "display" , "block" );
    $(".feed-load .feed-load-img").css( "display" , "none" ); 
  }
}); // end document ready

我的问题是，当我单击“加载更多”时，会发生内容被换出的情况。

这不是我想要发生的事情，我只是希望内容全部保留，这意味着页面加载时已经存在的内容我希望保留但是当我单击“加载更多”时我希望该内容保留但出于某种原因，最初存在的内容被我不希望发生的新内容换掉了。

可以在这里找到一个活生生的例子：http ://www.cyberfanatic.com

4

1 回答 1

3

当前代码的问题在于，在用户单击按钮后，您正在将新数据加载到现有数据之上。请参阅jQuery .load()。

您需要添加新数据，以保留现有数据：

// on click
$('.feed-load').click(function(){   

  // load the new data to an element
  $("<div>").load("feed.php #second-feed", function() {

    // all done, append the data to the '#feed-page'
    $("#feed-page").append($(this).find("#second-feed").html());

    // call your function
    hideLoading();
  });

  // continue the remaining of your code...
  $(".feed-load .button-content").css( "display" , "none" );
  $('.feed-load-img').css( "display" , "block" );
});

已编辑

按照评论的要求附加一些动画：

...
// all done, append the data to the '#feed-page'
var $html   = $(this).find("#second-feed").html(),
    $newEle = $('<div id="second-feed" />').attr("style", 'display:none;').html($html);

$("#feed-page").append($newEle);
$('#second-feed').slideToggle();
...

请参阅此小提琴示例！

于 2012-06-13T22:49:54.643 回答