jQuery切换、显示动画和加载url

几个月前我开始学习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>

我试图做的是，当我点击链接时，我希望

在页面加载时向下切换显示我的加载动画，当它准备好时，我希望动画消失，并将页面内容加载到我的

中。 当我的访问者读完所选的文章后，我希望他们能够再次单击该链接并向上切换

我已经找了好几个小时了，没法用了。 我试过用这个

<script>
function load(url){
   var target = event.target.id;
   $("#Loaded_"+target).toggle();
   $("#Loaded_"+target).load(url);   
}
</script>

函数加载（url）{
var target=event.target.id；
$（“#加载的#”+目标）.toggle（）；
$（“#加载的”+目标）。加载（url）；
}

它有点工作，但我的代码有三个主要问题：

• 它会向下切换，将页面加载到div中，但当我再次单击链接时，它会向上切换并再次加载页面，因此每次向下切换和向上切换都会为我的文章添加两个视图

• 它在chrome中工作，但在firefox中不工作

-- ReferenceError:未定义事件

• 无法获取要显示的加载动画

---

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

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

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

• 对于第一点，为什么不检查div是否已经包含 内容是什么
• 对于第二点，最好使用 事件侦听器使事件 通过
• 对于第三点，您可以通过 显示加载div的

现在大家一起：

<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
});

$（'a.title'）。在（'click'，function（）{//上使用单击侦听器
var target=this.id；
$（“#加载div”+目标）.show（）；//显示加载图像
$（“#加载的#”+目标）.toggle（）；
if（$（“#Loaded"+target）.html（））{//仅当容器
var url=getAttribute（“数据url”）；//尚未包含任何内容
$（“#加载的”+目标）。加载（url）；
}
$（“#loadingDiv”+target）.hide（）；//关闭正在加载的图像
});

现在，它可以很好地上下切换，但不会将页面加载到div中。感谢jbr3zy，它可以向下切换，显示我的加载动画，但不会加载页面，如果再次单击，也不会向上切换<代码>未捕获引用错误：未定义加载未捕获引用错误：未定义url根据@adeneo的建议编辑了我的答案。您使用的jQuery版本是什么？应该是1.7.2+1.10.2.min.js在应用您的更改后，我得到的唯一错误是

Uncaught ReferenceError:getAttribute未定义

，但我会尝试解决，您和adeneo帮了我很多忙：）谢谢，一切正常：）我最终使用ajaxStop隐藏加载动画。你能看看我的代码，告诉我它是否有效吗？

<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
});