javascript - 如何定位下一个 元素？

Question

当我点击超链接<a>时它将打开 <div> 的内容就在它之后。现在我正在将 ids 添加到 <a>和 <div>以他们为目标。但我如何提高效率呢？我的想法是使用一个脚本来搜索下一个 <div> 。这将避免声明 ids。

function open_content(y) {
    x=y.substr(-3,3)
    console.log(x);
    if (document.getElementById('content'+x).style.display=='none'){
        document.getElementById('click'+x).innerHTML="CLOSE";
        document.getElementById('content'+x).style.display='block';
    } else {
        document.getElementById('click'+x).innerHTML="SHOW";
        document.getElementById('content'+x).style.display='none';
    }
}

a {
    cursor: pointer;
}

<h2>CONTENT TITLE</h2>
<p><a id="click100" onClick="open_content(this.id)">SHOW</a></p>
<div id="content100" class="content" style="display:none;">
    <div> 
        <h3>Sub Title</h3>
        <p><a id="click101" onClick="open_content(this.id)">SHOW</a></p>
        <div id="content101" style="display:none;">
            <p>Place content here</p>
        </div>
    </div>
</div>

Answer 1

在HTML中

<p><a id="click100" onClick="open_content(this.id)">SHOW</a></p>
<div id="content100" class="content" style="display:none;">
    ...
</div>

链接<a id="click100" ...> 在 <p>内，因此需要第一个parentElement。然后然后nextElementSibling:

var link = document.getElementById("click100");
var parentThenNext = link.parentElement.nextElementSibling;

这样您就可以访问<div id="content100">...</div> .

Example