Question

这是我到目前为止所做的：

$(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

Answer 1

您当前代码的问题是，在用户单击该按钮后，您将通过现有代码加载新数据。请参阅jQuery .load()。

您需要的是append新数据，以便保留现有数据：

// 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" );
});

EDITED

根据评论的要求附加一些动画：

...
// 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();
...

请参阅此Fiddle Example！

jquery加载更多内容onclick

1 个答案:

EDITED