Question

编辑 - 我希望看到它是用javascript编写的，而不是jquery或框架。

我知道这很容易用jquery完成，但我想学习魔法背后的javascript，并且已经阅读了Jeremy Keith的Dom Scripting。

我已经找到了解决这本书的方法，但是做一些复制代码的例子与尝试自己构建一些东西有很大的不同。

现在我正在尝试做一些简单的事情（对于其他人）：当点击上面的header2元素时隐藏一个段落元素。这是HTML：

<div id="contentArea">
        <h2><a href="#">heading for the articles</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
        <h2><a href="">Second heading for the articles</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div><!-- END MAIN CONTENT ---------------->

我正在试图弄清楚完成它所需的步骤，甚至不能用简单的英语拼写出来，更不用说javascript了。

我正在尝试创建一个代码块，它会说“只要点击id为contentArea的div中的h2元素，就会找到它下面的下一段并将其隐藏起来。”

Answer 1

// Select all h2 which are inside contentAread
var elems = document.getElementById('contentArea').getElementsByTagName('h2'),
i;

// For each one
for(i = 0; i < elems.length; i++)
   elems[i].onclick = function(){
        var sibling = this;
        // While there is another sibling
        while(sibling = sibling.nextSibling){
            // If sibling is a P tag
            if(sibling.nodeName == 'P'){
                // Hide it
                sibling.style.display = 'none';
                // Then exit the loop
                break;
            }
        }
    };

Answer 2

您可以直接向元素添加onclick属性：

&lt;h2 onclick="...">...&lt;/h2>

这是一个显示或隐藏元素的简单函数：

function showHide(el) {
  el.style.display = (el.style.display == 'none')? '' : 'none'; 
}

使用window.onload将侦听器附加到主题标题：

window.onload = function() {
  var el = document.getElementById('contentArea');

  if (!el) return;
  var els = el.getElementsByTagName('h2');

  for (var i=0, iLen=els.length; i<iLen; i++) {
    els[i].onclick = function() {
      var node = this;

      do {
        node = node.nextSibling;

        // Hide all the Ps
        if (node.tagName && node.tagName.toLowerCase() == 'p') {
          showHide(node);

        // Stop when get to next heading 2
        } else if (node.tagName && node.tagName.toLowerCase() == 'h2') {
          break;
        }

      } while (node.nextSibling)
    };
  }
};

学习javascript，无法弄清楚隐藏和显示元素

2 个答案: