javascript jquery 加载更多内容 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11022888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery load more content onclick
提问by user1405690
This is what I have so far:
这是我到目前为止：
$(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
My problem is that when I click on "load more" what happens is that the content gets swapped out.
我的问题是，当我点击“加载更多”时，内容会被换掉。
That is not what I want to happen, I just want the content to all stay meaning the content that is already there on page load I want that to stay however when I click on "load more" I would like that content to stay but for some reason the content that was originally there gets swapped out with the new content which I don't want to happen.
这不是我想要发生的事情，我只是希望内容全部保留，这意味着页面加载时已经存在的内容我希望保留，但是当我单击“加载更多”时，我希望该内容保留出于某种原因，原来存在的内容被我不希望发生的新内容换掉了。
A live example can be found here: http://www.cyberfanatic.com
一个活生生的例子可以在这里找到：http: //www.cyberfanatic.com
回答by Zuul
The issue with your current code is that after the user clicks the button, you are loading the new data over the existent one. See jQuery .load().
您当前代码的问题在于，在用户单击按钮后，您将在现有数据上加载新数据。请参阅jQuery .load()。
What you need is to appendthe new data, in order to preserve the existent one:
您需要的是附加新数据，以保留现有数据：
// 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
已编辑
Append with some animation as requested at the comment:
根据评论的要求附加一些动画：
...
// 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();
...
See this Fiddle Example!
看到这个小提琴示例！
