单击一个标记以获取同级标记上的事件

Clicking on a tag to get event on sibling tag

本文关键字：事件 获取 一个 单击      更新时间：2023-09-26

我有以下html

<ul id="report">
  <li class="suite">
    <h1>Level 2</h1>
    <ul>
      <li class="test pass fast">
        <h2>it first</h2>
        <pre style="display: none;">
          <code>('hello').should.be.a('string');</code>
        </pre>
      </li>
    </ul>
  </li>
</ul>

我想改变prestyle从display:block到display:none当它上面的h2标签被点击。但是，我无论如何也想不出该怎么做。我知道我需要做一些类似这样的事情:

function changeStyle() {
    pre.style.display = 'none' == pre.style.display
    ? 'block'
    : 'none';
}

但是我不知道如何将它附加到h2。我试过:

var h2 = getElementsByTagName('h2');
var pre = h2.getElementById('pre');

但这是不对的，因为pre不是h2的子元素。我不知道该怎么办。我尝试在h2中添加各种点击事件监听器，并调用changeStyle函数。

注意:我真的不喜欢使用jQuery。

编辑:好吧，所以我没有疯。我已经尝试了几乎所有这些方法张贴这个问题之前，他们没有工作。这里面一定有别的原因。

例如，我尝试了Josh Beam的方法，我得到:"无法读取未定义的属性'addEventListener'"错误。

我甚至尝试用

来包装它
document.onLoad = function () {
//code
}

如果您想确保您获得兄弟pre元素，只需这样做(参见jsfiddle):

document.getElementsByTagName('h2')[0].addEventListener('click', function(e) {
    var pre = e.target.nextElementSibling;
    pre.style.display = pre.style.display === 'block' ? 'none' : 'block';
});

这将确保您没有选择任何其他可能出现在页面上的pre元素。

将适用于ul#report内部的任何H2元素

var main_ul = document.querySelector("#report");
main_ul.onclick = function(event){
  var elm = event.target;
  if(elm.tagName === "H2"){
    var pre = elm.nextElementSibling; // tada magic!
    changeStyle(pre);
  }
};

您可以这样使用getElementsByTagName:

var flag = 0
document.getElementsByTagName('h2')[0].onclick = function() {
  if (flag == 1) {
    document.getElementsByTagName('pre')[0].style.display = "none";
    flag = 0;
  } else {
    document.getElementsByTagName('pre')[0].style.display = "block";
    flag = 1;
  }
}
<ul id="report">
  <li class="suite">
    <h1>Level 2</h1>
    <ul>
      <li class="test pass fast">
        <h2>it first</h2>
        <pre style="display: none;">
          <code>('hello').should.be.a('string');</code>
        </pre>
      </li>
    </ul>
  </li>
</ul>

这也将允许您切换display .

你可以这样做

var report = document.getElementById("report"); // <--- get the parent 
var h2 = report.getElementsByTagName('h2')[0];  // <--- search for h2 within parent
var pre = report.getElementsByTagName('pre')[0];// <--- search for pre within parent
h2.addEventListener('click', function(){        // <--- attach event to h2
  pre.style.display = pre.style.display === 'none' ? '' : 'none';  // <--- toggle display
});


var report = document.getElementById("report");
var h2 = report.getElementsByTagName('h2')[0];
var pre = report.getElementsByTagName('pre')[0];
h2.addEventListener('click', function() {
  pre.style.display = pre.style.display === 'none' ? '' : 'none';
});
<ul id="report">
  <li class="suite">
    <h1>Level 2</h1>
    <ul>
      <li class="test pass fast">
        <h2>it first</h2>
        <pre style="display: none;">
          <code>('hello').should.be.a('string');</code>
        </pre>
      </li>
    </ul>
  </li>
</ul>

相关文章：