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>

我需要的是如果单击assign-show,然后添加 <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'); 
});