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 回答