我如何找到 <div> 属于此按钮的元素

Question

我想将程序转换为普通的javascript并删除所有JQuery代码，但是我曾经使用过这样的JQuery函数，以使用“ .hide-this”类来查找，从而仅隐藏属于该卡的Card-Body按钮。

  /* Collapse/Expand Card-Content in ListAction*/
  $('.btn-hide').click(function() {
    $(this)
      .closest('.card')
      .find('.hide-this')
      .toggle();
    if ($(this).text() == 'Zuklappen') {
      $(this).text('Aufklappen');
    } else {
      $(this).text('Zuklappen');
    }
  });

但是，当我尝试用普通的javascript执行此操作时，总是会收到一条错误消息，指出this.closest不是函数

我假设这并不引用添加了actionListener的元素，但是我也不知道如何引用此元素

const toggleCard = document.querySelectorAll('.btn-hide');
  toggleCard.forEach(elem => {
    elem.addEventListener('click', () => {
      const hide = this.closest('.hide-this');
      hide.style.display = hide.style.display === 'block' ? 'none' : 'block';
    });
  });

Answer 1

只需将this.closest更改为elem.closest

你可以在Codepen上看到它

Ps：还可以使用window.getComputedStyle(hide).display而不是hide.style.display来检查elem是否可见。