javascript - 通过一个 onclick 函数隐藏多个 div

Question

我正在寻找解决此问题的 Javascript 解决方案。我有以下 HTML:

<div id = "container">
  <div id = "data">
    <div>
      <h3> Address</h3>
      <b>Expand...</b>
      <div id="content">ul. Pomorska</div>
    </div>
    <div>
      <h3> Telefon </h3> <b>Expand...</b>
      <div id="content">26565352</div>
    </div>
    <div>
      <h3>Email</h3>
      <b>Expand...</b>
      <div id="content">asdasdag@aga.com</div>
    </div>
  </div>
</div>

我想在 onclick Expand 时隐藏内容 div。到目前为止，我已经创建了一个隐藏内容 div 并尝试将事件处理程序分配给节点的函数。

function hideinfo() {
  var node = document.getElementById("data");
  var contactdata = node.getElementsByTagName("div");
  for(var i=0; i<contactdata.length;i++) {
    if(contactdata[i].id == "content") {
      alert(contactdata[i].previousSibling.innerHTML);
      contactdata[i].previousSibling.addEventListener('click',ShowHide,false);
      contactdata[i].style.display="none";
    }
  }
}

问题是警报显示未定义。为什么看不到节点？在 Javascript 中是否有更好的方法来做到这一点？

Answer 1

因为 previousSibling 很可能是 div 元素之前的文本节点。您可能想使用 previousElementSibling相反:)

在当今的大多数浏览器中，querySelectorAll ，它允许您使用 CSS 选择器来查找元素，也是一个很好的替代方案 (IE8+)