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扩展时隐藏内容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 +）

Answer 2

previousSibling属性返回所选元素的上一个兄弟节点（同一树级别中的上一个节点）

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

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

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

您最好使用querySelectorAll。

此外，您不能拥有多个具有SAME ID的div，而是使用class。

用一个onclick函数隐藏很多div

2 个答案: