[英]Javascript: Show/Hide multiple elements by name
单击另一个元素时,我需要显示/隐藏具有相同名称的多个元素,例如<span name="showhide" value="one" id="button">Click to Hide One</span>
<span name="showhide" value="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
单击时将隐藏具有相应值的元素
<span name="showhide" value="one">One</span>
<span name="showhide" value="two">Two</span>
<span name="showhide" value="shoe">shoe</span>
另外, onclick=''
不能在HTML中使用,必须在脚本中使用。 除href之外,也不能将任何属性应用于标签(这是针对MediaWiki的)
我尝试了很多不同的方法,但似乎无法正常工作,有人有什么建议吗?
标记无效:没有<span name>
或<span value>
这样的属性,并且不能有多个具有相同id
元素。 所有这些都可能会使您为通过名称或ID来获取元素而进行的任何尝试混淆。 改用一个class
,由于您所拥有的是到页面其他部分的链接,因此将它们标记为内部链接似乎很明智。 您始终可以使用CSS设置样式,使其看起来不像链接。
<a class="showhide" href="#one">Click to hide one</a>
<a class="showhide" href="#two">Click to hide two</a>
<div id="one">One</div>
<div id="two">Two</div>
<script type="text/javascript">
for (var i= document.links.length; i-->0;) {
var link= document.links[i];
if (link.className=='showhide') {
var div= document.getElementById(link.hash.substring(1));
Toggler(link, div, true);
}
}
function Toggler(toggler, togglee, state) {
toggler.onclick= function() {
state= !state;
togglee.style.display= state? 'block' : 'none';
return false;
}
}
</script>
在页面加载时,首先向具有该名称的所有元素添加事件以切换隐藏/显示。 单击某个元素时,循环浏览所有元素,并根据当前状态将其样式更改为display:none
或display:block
。 要标识当前状态,可以找到display
属性值或添加/删除类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.