如何创建在单击时在两个值之间进行翻转的元素？
如何创建在单击时在两个值之间进行翻转的元素？
提问于 2009-02-27 06:30:49
假设有两个这样的跨度：
<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函数，然后将每对元素包装在一个父元素中。
在没有父节点的情况下可以做到吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 2009-02-27 13:39:14
还有另一个版本，当JavaScript关闭时，渐进式增强 - 将正确地显示完整的信息。
<span class="details">Here is a big long string of info blah blah</span>
<script type="text/javascript">
// Open/close span behaviour
//
function infoToggle(span) {
var ersatz= document.createElement('span');
ersatz.appendChild(document.createTextNode('Click for info...'));
span.parentNode.insertBefore(ersatz, span);
span.style.display= 'none';
span.onclick= function() {
ersatz.style.display= 'inline';
span.style.display= 'none';
};
ersatz.onclick= function() {
ersatz.style.display= 'none';
span.style.display= 'inline';
};
}
// Bind to all spans with class="details"
//
var spans= document.getElementsByTagName('span');
for (var i= spans.length; i-->0;)
if (spans[i].className=='details')
infoToggle(spans[i]);
</script>Stack Overflow用户
发布于 2009-02-27 06:56:55
如果你真的想不使用ids，你可以这样做：
<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。
Stack Overflow用户
发布于 2009-02-27 06:33:12
我不确定它的实现，但逻辑看起来类似于
- Get all spans
- 隐藏下面的相邻跨度(默认情况下，它们对非JS用户可见)
- 将偶数处理程序附加到第一个跨度
- 事件处理函数-如果下一个跨度不可见，则显示下一个跨度，否则隐藏它<
>F29
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/593734
复制相关文章
相似问题
腾讯云开发者
