Html Javascript切换可见性多个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17642422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript toggle visibility multiple divs
提问by user2072017
http://blog.movalog.com/a/javascript-toggle-visibility/
http://blog.movalog.com/a/javascript-toggle-visibility/
this is a page with some code and a script im using in my site for an image gallery, however when trying to toggle the visibility of multiple div's it only works on the first. can someone please fix it to work with multiple div's, i dont know js :)
这是一个包含一些代码和脚本的页面，我在我的网站中使用了一个图像库，但是当尝试切换多个 div 的可见性时，它只适用于第一个。有人可以修复它以使用多个 div，我不知道 js :)
here is the javascript
这是javascript
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
and here is the html code for the links
这是链接的html代码
<tr><td><a href="#" onclick="toggle_visibility('nyc');">New York</a></td>
<td><a href="#" onclick="toggle_visibility('photoshop');">Photoshop Work</td>
<td><a href="#" onclick="toggle_visibility('photography');">Photography</td></tr>
<tr><td><a href="#" onclick="toggle_visibility('art');">Art Projects</td></tr>
wait a sec, could this not be working because it is trying to acess the properties of multiple divs via the "id" property, would it work with the class property and if so would i just change the java script where it says "id" to "class"
等一下，这可能不起作用，因为它试图通过“id”属性访问多个 div 的属性，它是否可以与类属性一起使用，如果可以，我是否只需更改显示“id”的 java 脚本去“上课”
回答by Oriol
It seems that you were trying something like
看来你正在尝试类似的东西
<div id="a"></div>
<div id="a"></div>
toggle_visibility('a');
The problem is that each id must be unique in the document, so document.getElementByIdreturns a single element, not a collection of elements.
问题是每个 id 在文档中必须是唯一的，因此document.getElementById返回单个元素，而不是元素的集合。
Then, if you want to have more than one element with the same id, you should use classes instead.
然后，如果您想拥有多个具有相同 id 的元素，则应改用类。
<div class="a"></div>
<div class="a"></div>
function toggle_visibility(cl){
var els = document.getElementsByClassName(cl);
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.display = s.display==='none' ? 'block' : 'none';
};
}
toggle_visibility('a');
If you want to make it work with multiple classes, use
如果要使其与多个类一起使用，请使用
var toggle_visibility = (function(){
function toggle(cl){
var els = document.getElementsByClassName(cl);
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.display = s.display==='none' ? 'block' : 'none';
};
}
return function(cl){
if(cl instanceof Array){
for(var i=0; i<cl.length; ++i){
toggle(cl[i]);
}
}else{
toggle(cl);
}
};
})();
toggle_visibility('myclass');
toggle_visibility(['myclass1','myclass2','myclass3']);
回答by Oriol
You can use
您可以使用
function toggle_visibility(id) {
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
if(id instanceof Array){
for(var i=0; i<id.length; ++i){
toggle(id[i]);
}
}else{
toggle(id);
}
}
And call it like
并称之为
toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);
Another possible way is using argumentsvariable, but that could slow down your code
另一种可能的方法是使用arguments变量，但这可能会减慢您的代码速度
function toggle_visibility() {
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
for(var i=0; i<arguments.length; ++i){
toggle(arguments[i]);
}
}
And call it like
并称之为
toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');
If you don't want to create the function toggleeach time you call toggle_visibility(thanks @David Thomas), you can use
如果您不想toggle每次调用时都创建该函数toggle_visibility（感谢@David Thomas），您可以使用
var toggle_visibility = (function(){
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
return function(id){
if(id instanceof Array){
for(var i=0; i<id.length; ++i){
toggle(id[i]);
}
}else{
toggle(id);
}
};
})();
toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);
Or
或者
var toggle_visibility = (function(){
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
return function(){
for(var i=0; i<arguments.length; ++i){
toggle(arguments[i]);
}
};
})();
toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');
回答by mostly_perl_guy
You either need to cycle through a list of ids or use a class name as the argument to toggle_visibilty ---- which means you would have to edit the function. It looks like right now you are only calling toggle_visibility on one element.
您要么需要循环遍历 id 列表，要么使用类名作为 toggle_visibilty 的参数 ---- 这意味着您必须编辑该函数。现在看起来您只是在一个元素上调用 toggle_visibility 。
jQuery makes this kind of thing easier:
jQuery 使这种事情变得更容易：
<code>
//selects all elements with class="yourClassName"
jQuery(".yourClassName").toggle();
//select all divs
jQuery("div").toogle();
//select all divs inside a container with id="myId"
jQuery("#myId > div").toggle();
</code>
回答by mostly_perl_guy
There is a very silly mistake in your code..
Add the idattribute in the td tags id='nyc', etc. and it should work fine
您的代码中有一个非常愚蠢的错误。id在 td 标签 id='nyc' 等中添加属性，它应该可以正常工作
