Question

我将工作人员添加到我的CMS但加载成员时遇到问题，因为我认为我的代码非常混乱。是否可以删除“li a.job-desc”＆amp; “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>

Answer 1

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

（要访问特定元素，您可以改用id，与使用class访问它相比会更快

在这种情况下，您可以为job-desc提供一个公共课<a>，为description提供<p>，然后您可以使用以下脚本来显示相应的说明。

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

Demo

如果要关闭其他说明，可以使用:visible选择器，如下所示：

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

Demo

Answer 2

使用每个迭代器

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

Answer 3

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

$("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();
});

动态jQuery内容加载

3 个答案: