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