JavaScript Elements

JavaScript Elements

本文关键字：Elements JavaScript      更新时间：2023-09-26

我需要以下方面的帮助：

我有一个包含h3-s和段落的页面，我希望所有段落最初都隐藏起来。

如果单击了一个h3，脚本将循环遍历它下面的标记，显示段落标记，如果它涉及到另一个h3标记，它应该打破循环。

我无法控制html输出，因此我无法嵌套标签或提供任何h3-id。下面的代码就是我所要使用的全部。

例如，如果点击H3标题2，则显示标题2第1段和标题2第2段，如果再次点击H3主题2，则隐藏标题2第3段和标题3第2段。

<h3>H3 Title1</h3>
<p>Title 1 Para 1</p>
<p>Title 1 Para 2</p>
<p>Title 1 Para 3</p>
<p>Title 1 Para 4</p>

<h3>H3 Title2</h3>
<p>Title 2 Para 1</p>
<p>Title 2 Para 2</p>

<h3>H3 Title3</h3>
<p>Title 3 Para 1</p>
<p>Title 3 Para 2</p>

<h3>H3 Title4</h3>
<p>Title 4 Para 1</p>
<p>Title 4 Para 2</p>
<p>Title 4 Para 3</p>

没有jQuery请

查看getElementsByTagName以获取页面上的所有H3，您需要为这些H3附加一个click（）处理程序。

在你的onclick中，你循环所有接下来的元素，直到你得到一个H3并打破循环。查看nextElementSibling以获取H3之后的元素。

为了显示/隐藏，可以设置css类，也可以直接在display:block和display:none之间切换元素的样式。

类似。。

var pHide = function () {
    var ps = document.getElementsByTagName('p'), i = ps.length;
    while(i-->0) ps[i].style.display = 'none';
},
toggleDisplay = function (elm) {
    elm.style.display = elm.style.display === 'none' ? 'block' : 'none';
},
nextNode = function (elm) { // can't assume built in?
    var e = elm;
    while( e = e.nextSibling ) if ( e.tagName !== undefined ) break;
    return e;
},
addActions = function () {
    var hs = document.getElementsByTagName('h3'), i = hs.length;
    while(i-->0) hs[i].addEventListener('click',function () {
        var elm = this;
        while( (elm = nextNode(elm)) && elm.tagName.toLowerCase() != 'h3') if(elm.tagName.toLowerCase() == 'p') toggleDisplay(elm);
    }, false);
};
pHide();
addActions();​

示例fiddle

我完全同意xqwzts的回答：获取对单击的H3元素的引用，迭代以下节点并检查它们（类型和名称）。

这是另一个可能更容易阅读的解决方案：

// the event handler we are going to use
var handler = function() {
    // `this` refers to the clicked element
    var node = this.nextSibling;
    // iterate over all following nodes
    for(; node ; node = node.nextSibling) {
        if(node.nodeName === 'P') {
            // if it is a p element, toggle the visibility
            node.style.display = node.style.display === 'block' ? '' : 'block';
        }
        else if(node.nodeName === 'H3') { // or node.nodeType === 1
            break; // if it is a H3 element (or an element but not P), stop
        }
    }
};
// get all h3 elements
var h3s = document.getElementsByTagName('h3');
// assign a click event handler to all of them
for(var i = 0, l = h3s.length; i < l; i++) {
    h3s[i].onclick = handler;
}

演示

有多种方法可以绑定事件处理程序，所有这些都在quicksmode.org上得到了很好的解释

参考：getElementsByTagName、Node#nodeName、Node#nodeType、Element#style

相关文章：