jquery按类别选择孩子，在子按钮上切换父母类

Question

我试图通过class选择一个元素，并且当它被点击时父母被切换。

HTML：

`

great-grandparent <div class='section' id='section-18'> 
    grandparent  <div class='docs'> 
      parent  <div class='octowrap'> 
       *   <a class='octothorpe' href='#section-18'>#</a> 

`

$('octothorpe').closest('div.section').click(function() { 
        $(".fold").toggle(500); 
         console.log('fold', $('.fold').length); 

       }); 
}); 

console.log("closest", $('.octothorpe').closest('div.section').length); 

`

<style> 
.fold { 
    display: None; 
} 
</style> 

`

q1回答< < 既不工作，我如何测试类元素被选中？ 是否有可输出的标准控制台日志消息？ （我试着看着firefox inspector，但是不知道它是否被选中了，我怎么测试这个简单的方法？（即不用改变颜色等等，只是在日志中））>>

Am我链接功能点击并正确切换？ 只有孩子可以被点击，（八尺度是一个href），但父级.section是什么需要切换？

为以下代码：

的console.log。 （父母的考试）最接近= 1，永不改变。
（用于测试折叠）每次点击增加倍数。但即使使用preventDefault（），toggleClass也不起作用。 display:None款式在这种情况下不起作用吗？

`

$(function() { 
    $(".octothorpe").click(function(e) { 
          e.preventDefault(); 
          var sector = $(this).closest("div.section"); 
          sector.toggleClass(".fold"); 
          //sector.(".fold").toggle(); 
          console.log('fold', $('.fold').length); 
         }); 
    }); 

console.log("closest", $('.octothorpe').closest('div.section').length); 

---

嗨感谢所有为止。经过一番捣乱之后，我不能只选择曾祖父母，而是选择父母兄弟姐妹和祖父母兄弟姐妹。如果我只选择曾祖父班，那么这个元素本身就会丢失，因为我无法将它带回来！

因此，我尝试了下面更具选择性的代码。然而，隐藏或上下滑动/向下似乎都不会做任何事情。 console.log输出显示折叠类递增，因此元素被选中。

此代码有什么问题？

`

$(function(){ 
    $('.octothorpe').on({ 
          click:function(e){ 
           e.preventDefault(); 
           var pfold =$(this).closest('.octowrap').siblings('p'); 
           var cfold =$(this).closest('docs').siblings('.code'); 
           $pfold=$(pfold); $cfold=$(cfold); 
           //$pfold.hide(); 
           //$cfold.hide(); 

           if (!$pfold.hasClass("fold") && !$cfold.hasClass("fold")) { 
            $cfold.slideUp().addClass('fold'); 
            $pfold.slideUp().addClass('fold'); 
            console.log('fold', $('.fold').length); 
           } 
           else { 

            cfold.slideDown().removeClass('fold'); 
            pfold.slideDown().removeClass('fold'); 
           }  
          } 
         }); 

}）;

`

`

Answer 1

console.log($('.section').length); 

会告诉你有多少元素被选中。如果你想知道，如果​​选择工作，将

console.log($('.fold').length); 

在点击功能。

Answer 2

您可以使用.parent（）方法。

这样考虑：

<div class="parent"> 
    <a href="#" class="child">click me</a> 
</div> 

JS是：

$(function(){ 
    $('.child').on({ 
    click:function(e){ 
     e.preventDefault(); 
     //stop it from refreshing the page 

     $(this).parent().toggle(); 
     //$(this) is the what you clicked on - <a class="child"> 
     //.parent() is the <div class="parent"> 
     //.toggle() show/hide the .parent() 
    } 
    }); 
}); 

下面这段代码是有点哑。既然你隐藏了父母，这意味着你会自动隐藏孩子。所以.toggle（）是愚蠢的。更好的方法是：

$(function(){ 
    $('.child').on({ 
    click:function(e){ 
     e.preventDefault(); 
     //stop it from refreshing the page 

     $(this).parent().hide(); 
     //$(this) is the what you clicked on - <a class="child"> 
     //.parent() is the <div class="parent"> 
     //.hide() hide the .parent() 
    } 
    }); 
}); 

Answer 3

假设您有另一个容器上的一个容器部分和锚（它是有意义的，如果你要使用他们喜欢的内容索引/列表）我会去这个：

$(".octothorpe").click(function(e) { 
    e.preventDefault(); 
    var sectorhash = $(this).attr("href"); 
    $sector = $(sectorhash); 
    if (!$sector.hasClass("fold")) { 
     $sector.slideUp().addClass("fold"); 
    } 
    else { 
     $sector.slideDown().removeClass("fold"); 
    } 
});