javascript - jquery parent sibling selector 后退两步

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

上面的代码适用于添加类，但删除类无效。

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