几个月前我开始学习 php 和 smarty,到目前为止一切都很好。现在我到了需要使用 jQuery 的地步。
我有一个文章列表,我想在不重新加载页面的情况下加载到 div 中。这是我的 html/smarty 代码:
<a class="title" id="link_{$val.id}" href="#id{$val.id}" onclick="load('{$baseurl}/read-{$val.id}.html');return false;">{$val.title}</a>
<div id="loadingDiv_{$val.id}" style="display:none">
<img src="{$templatepath}/images/loading.gif" />
</div>
<div id="Loaded_{$val.id}" class="full-article"> </div>
我想要做的是当我点击链接时,我希望在<div id="loadingDiv">
页面加载时切换显示我的加载动画,当它准备好时我希望动画消失并将我的页面内容加载到我的<div id="Loaded_{$val.id}"></div>
. 当我的访问者阅读完所选文章时,我希望他们能够再次单击该链接并向上切换<div id="Loaded_{$val.id}"></div>
。
我一直在寻找几个小时,但无法让它工作。我试过用这个
<script>
function load(url){
var target = event.target.id;
$("#Loaded_"+target).toggle();
$("#Loaded_"+target).load(url);
}
</script>
它有点工作,但我的代码有3个主要问题:
它向下切换,将页面加载到 div 中,但是当我再次单击链接时,它会向上切换并再次加载页面,因此每次向下和向上切换都会为我的文章添加 2 个视图
它适用于chrome,但不适用于firefox
-- ReferenceError: 事件未定义
- 无法显示加载动画
我不是在寻找完整的解决方案,我想知道我需要使用/组合哪些功能来实现我想要的。