使用一个 onclick 功能隐藏许多 div答案

【问题标题】：Hiding many divs with one onclick function使用一个 onclick 功能隐藏许多 div
【发布时间】：2012-11-18 19:36:40
【问题描述】：

我正在为这个问题寻找 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>

我想在点击展开时隐藏内容 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 中做到这一点？

【问题讨论】：

是否可以选择 jquery ？
不，这是uni的东西，我们看看js是如何被不同浏览器处理的

标签： javascript onclick

【解决方案1】：

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

在当今的大多数浏览器中，querySelectorAll 让您可以使用 CSS 选择器来查找元素，也是一个不错的选择 (IE8+)

【讨论】：

我链接的 MDN 文档页面有一个兼容性表。

【解决方案2】：

previousSibling 属性返回被选元素的上一个兄弟节点（同一树层的上一个节点）

在您的情况下返回 TEXT 节点。

正如你在这个 jsfiddle 中看到的：http://jsfiddle.net/Xu383/

alert(contactdata[i].previousSibling.nodeName);

最好使用 querySelectorAll。

此外，您不能有多个具有相同 id 的 div，请改用 class。

【讨论】：