尝试使用jquery实现简单的“加载更多”功能。我们的想法是以与页面相同的方式使用它。单击并显示从数据库加载的特定数量的帖子。
我有以下javascript:
$(function(){
var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
function(){
var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
function(){
$(".loading").show("fast");
count += num;
$.post("posts.php", {'page': count}, function(data){
$("#contents").append(data);
$(".loading").hide("slow");
});
}
);
和以下文件posts.php
<?
echo "hello";
?>
我还有另一个文件page.php和
<div id="contents"></div>
<div class="loading"><span style="text-decoration: blink;">LOADING...!</span></div>
<button id="more">More..</button>
当我点击“更多按钮”虽然没有任何反应,即使我只是想在这里打印出一个简单的你好世界。我已经在文件的头部加载了javascript,如
<script type ="text/javascript" src ="javascript/load.js"></script>
我实现的其他JavaScript功能正常。是否有东西要添加到page.php中的“loading”或“contents”元素?
答案 0 :(得分:2)
你的javascript缺乏基本的句法结构,并且必须发出语法错误,除非你在发布时搞砸了它。试试这个:
$(function(){
var count = 0;
$("#more").click(loadPosts);
loadPosts();
function loadPosts() {
var num = 20;
$(".loading").show("fast");
count += num;
$.post("posts.php", {'page': count}, function(data){
$("#contents").append(data);
$(".loading").hide("slow");
});
}
});
<强>更新强>
编辑上面的代码并删除了$("#contents").load("posts.php");
。这不是必要的,也是多余的。