使用 Javascript 通过子按钮更改父类

Question

我基本上想问的是我是否可以做到这一点？

function Close(){
  // what the furry mermaids should i put in here!?
  }

.vissible {
  display: block;
  }
.hidden {
  display: none;
  }
#parentDiv1{
  background-color: red;
  }
#parentDiv2{
  background-color:blue;
  }

<div id="parentDiv1" class="visible">
  <button id="closebtn" onclick="Close()">close</button>
 <p> This is div 1 </p>
</div>
<div id="parentDiv2" class="visible">
 <button id="closebtn" onclick="Close()">close</button>
 <p> This is div 2 </p>
</div>

有两个 div 包含相同的按钮，但每个按钮都将其父 div 的类更改为隐藏。仅限其父母的 div。这是因为我想制作很多页面，但它们用相同的代码和相同的按钮一页一页地关闭。我在这里想要一个简约的解决方案。

哦，请不要含糊其词地回答。如果您要展示它，请解释它是如何工作的以及如何应用它。需要一个工作代码示例。

注意：只能使用一种功能，并且由两个 Div 分隔的两个相同按钮使用。

谢谢，麻烦您了！：D

Answer 1

您可以将当前元素上下文传递this给方法。然后可以使用属性访问父 div parentNode。要操作元素的类，请使用Element.classList属性。

function Close(elem) {
   elem.parentNode.classList.add('hidden')
   elem.parentNode.classList.remove('visible')
}

function Close(elem) {
   elem.parentNode.classList.add('hidden')
   elem.parentNode.classList.remove('visible')
}

function Close(elem) {
  elem.parentNode.classList.add('hidden')
  elem.parentNode.classList.remove('visible')
}

.vissible {
  display: block;
}
.hidden {
  display: none;
}
#parentDiv1 {
  background-color: red;
}
#parentDiv2 {
  background-color: blue;
}

我建议您使用不引人注目的事件处理程序。而不是使用丑陋的内联点击处理程序。

<div id="parentDiv1" class="visible">
  <button id="closebtn" onclick="Close(this)">close</button>
  <p>This is div 1</p>
</div>
<div id="parentDiv2" class="visible">
  <button id="closebtn" onclick="Close(this)">close</button>
  <p>This is div 2</p>
</div>

document.addEventListener("DOMContentLoaded", function(event) {
  var elements = document.querySelectorAll('.closebtn');
  elements.forEach(function(element) {
    element.addEventListener('click', function() {
      this.parentNode.classList.add('hidden');
      this.parentNode.classList.remove('visible');
    })
  });
});

.vissible {
  display: block;
}
.hidden {
  display: none;
}
#parentDiv1 {
  background-color: red;
}
#parentDiv2 {
  background-color: blue;
}