jQuery的父母兄弟選擇退兩步

Question

我試圖改變元素的類，但似乎無法得到它的權利這裏是我的html

<div class = "grand"> 
    <section class = 'minimized'> 
    <div class = "div-1"> <button class = 'assign-show'></button> </div> 
    </section> 
    <section class = 'assignment'> 
    <div class = "div-2"> <button class = 'assign-hide'></button> </div> 
    </section> 
</div> 

我需要的是如果單擊分配秀，再加入低於<section class = 'assignment'>和<section class = 'minimized'>

是我的jQuery腳本

$('.assign-show').on('click',function(){ 
    $(this).closest('.minimized').addClass('hide'); 
    $(this).closest('.minimized').addClass('assignment-hide'); 
    $(this).parent('section').siblings('.assignment').removeClass('hide'); 
    $(this).parent('section').siblings('.assignment').removeClass('assignment-hide'); 
}); 

上面的代碼可以很好地用於addclass但刪除類是行不通的。

Answer 1

你的問題是因爲parent()只能在DOM樹上移動一級，而section是離.assign-show兩級。要解決此問題，您可以使用parents()（注意複數）或closest()。後者看起來更合適，因爲它在第一次匹配時停止。

另請注意，您可以將addClass()和removeClass()調用加入。試試這個：

$('.assign-show').on('click', function() { 
    $(this).closest('.minimized').addClass('hide assignment-hide'); 
    $(this).closest('section').siblings('.assignment').removeClass('hide ssignment-hide'); 
});