0

我正在为这个问题寻找一个 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 中做到这一点？

4

2 回答 2

1

The previousSibling property returns the previous sibling node (the previous node in the same tree level) of the selected element

which returns in your case the TEXT node.

As you can see in this jsfiddle: http://jsfiddle.net/Xu383/

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

You are better of using the querySelectorAll.

Also you can't have multiple divs with the SAME id, use class instead.

于 2012-11-18T10:52:48.023 回答
1

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

在当今的大多数浏览器中，querySelectorAll允许您使用 CSS 选择器来查找元素，也是一个不错的选择（IE8+）

于 2012-11-18T10:48:12.310 回答