javascript - 如何创建一个在单击时在两个值之间翻转的元素？

Question

给定两个这样的跨度:

<span>Click for info</span>
<span style="display: none">Here is a big long string of info blah blah</span>

...我想为每个附加一个 onclick 函数，以便访问者看到“单击以获取信息”，然后当他们单击它时，第一个跨度被隐藏，第二个跨度被取消隐藏。当然，当点击第二个时，一切都会恢复到原来的状态。

我没有办法轻松生成唯一 ID，所以我宁愿避免使用 getElementByID() 路由，而且我宁愿不使用 jQuery 或任何其他重量级依赖项。有没有一种优雅的方式来做到这一点？

到目前为止，我的最佳想法是编写一个 toggleAllSiblings() 函数，为该对中的两个元素将 onclick 设置为该函数，然后将每一对包装在一个父元素中。

可以不用父节点吗？

Answer 1

如果你真的不想使用 id，你可以这样做:

<script>
function togglePrevious(sender) {
    sender.previousSibling.style.display = "inline";
    sender.style.display = "none";
}
function toggleNext(sender) {
    sender.nextSibling.style.display = "inline";
    sender.style.display = "none";
}
</script>
<span onclick="javascript:toggleNext(this);">Click for info</span>
<span onclick="javascript:togglePrevious(this);" style="display:none">Info blablabla</span>

请注意，如果您使用 span，那么您应该真正使用“inline”而不是“block”，因为它们是内联元素。将它们的显示样式设置为 block 将强制它们成为 div。