2

几个月前我开始学习 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: 事件未定义

  • 无法显示加载动画

我不是在寻找完整的解决方案,我想知道我需要使用/组合哪些功能来实现我想要的。

4

2 回答 2

1

首先删除内联事件处理程序:

<a class="title" id="link_{$val.id}" href="#id{$val.id}" data-url="{$baseurl}/read-{$val.id}.html">{$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>

然后使用适当的事件处理程序,并在加载内容后设置一个类:

$('a.title').on('click', function(e) {
    e.preventDefault();
    var elem = $('#Loaded' + this.id);

    if ( ! elem.hasClass('loaded') ) {
        elem.load( elem.data('url') );
    }

    elem.toggle().addClass('loaded');
});
于 2013-09-05T01:21:27.890 回答
0
  • 对于第一点,为什么不检查 div 是否已经包含内容?
  • 对于第二点,最好使用 onClick事件侦听器,以便事件通过
  • 对于第三点,您可以通过显示loadingDiv

现在都在一起了:

<a class="title" id="link_{$val.id}" href="#id{$val.id}" 
   data-url="{$baseurl}/read-{$val.id}.html">{$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>



$('a.title').on('click', function() {   // use a click listener
       var target = this.id;

       $("#loadingDiv_"+target).show(); // display loading image

       $("#Loaded_"+target).toggle();
       if ($("#Loaded_"+target).html()){         // only load if the container 
           var url = getAttribute("data-url");   // has no content yet
           $("#Loaded_"+target).load(url);   
       }

       $("#loadingDiv_"+target).hide(); // dismiss the loading image
});
于 2013-09-05T01:37:54.390 回答