动态jQuery内容加载

Dynamic jQuery content loading

本文关键字：加载 jQuery 动态      更新时间：2023-09-26

我添加工作人员到我的CMS，但有麻烦加载成员，因为我认为我的代码是相当混乱。是否可以删除"li a.job-desc"&"li a.job-desc1"等，并拥有一个适用于所有员工的全局变量。一旦点击每个工作人员，他们自己的描述应该打开，其他成员关闭

点击此处:http://jsfiddle.net/zangief007/BSN5u/14/

HTML:

      <ul>
        <li><a href="#" class="job-desc1"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
        <li>Jon doe</li>
        <li>09 548 5554</li>
        <li>jon@gmail.com</li>
      </ul>
       <p class="description1">Joe Doe dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
       <ul>
           <li><a href="#" class="job-desc2"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
        <li>Jenny Hill</li>
        <li>09 548 5554</li>
        <li>jon@gmail.com</li>
      </ul>
      <p class="description2">Jenny Hill dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>

         <ul>
             <li><a href="#" class="job-desc3"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
        <li>Peter Small</li>
        <li>09 548 5554</li>
        <li>jon@gmail.com</li>
      </ul>
      <p class="description3">Peter Small dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
  </div>

JS:

 $( "li a.job-desc" ).click(function() {
          $( "p.description" ).fadeToggle( "slow", "linear" );
});
$( "li a.job-desc1" ).click(function() {
          $( "p.description1" ).fadeToggle( "slow", "linear" );
});
$( "li a.job-desc2" ).click(function() {
              $( "p.description2" ).fadeToggle( "slow", "linear" );
});
</script>

CSS类用于对一组元素进行分组。为每个元素添加class1、class2等类是没有意义的。

(对于访问特定的元素，您可以使用id来代替，这将比使用class访问它更快)

在这种情况下，您可以为<a>提供一个通用类job-desc，为<p>提供一个通用类description，然后您可以使用以下脚本显示各自的描述。

$("li a.job-desc").click(function () {
  $(this).closest('ul').next("p.description").fadeToggle("slow", "linear");
});

演示

如果你想关闭其他的描述，你可以使用:visible选择器，如下所示:

 $("li a.job-desc").click(function () {
  var $desc = $(this).closest("ul").next("p.description").fadeToggle("slow", "linear");
  $('p.description:visible').not($desc).hide();
});
演示

使用每个迭代器

$("li a").each(function(index,ele){
  $(this).click (function(){
    $(this).closest("ul").next("p.description").fadeToggle( "slow", "linear" );
  });
});

当链接和描述不包含在一个单独的容器中时，它会变得有点混乱，但它应该在相关的描述中淡出，并在所有其他描述中淡出。

$("li a.job-desc").click(function() {
   // first find the description associated with the clicked link
   var description = $(this).closest("ul").nextAll("p.description").first();
   description.siblings("p.description").fadeOut();
   description.fadeIn();
});
相关文章：