隐藏多个div的功能 [英] Function to hide multiple divs
问题描述
我希望,有人可以解释我在哪里出错我的代码...所以我有这个功能:
function divdisplay(element){
if(document.getElementById(element).style.display =='none'){
document.getElementById(element).style.display ='block';
for(var i = 0; i< NUMBER_OF_DIVS; i ++)
document.getElementById(i).style.display ='none';
} else
document.getElementById(element).style.display ='none';
这个函数显示div很好,但隐藏部分是问题。我想隐藏其他几个< divs>
。这些其他< divs>
的 ids
是简单的数字,这就是为什么我试图用变量 i
。但当我点击< div>
#1时,< div>
#2已经可见,出现code>< div> #1并且< div>
#2不会消失。
< divs>
如下所示:
< div id =1style =display:none;>
< a href =javascript:divdisplay(1);>
< img src =.../>
< / a>
< / div>
< div id =2style =display:none;>
< a href =javascript:divdisplay(2);>
< img src =.../>
< / a>
< / div>
< div id =3style =display:none;>
...
和他们第一次出现时相应的链接
< a href =javascript:divdisplay(1);>
< a href =javascript:divdisplay(2);>
被点击。
每个< div>
中的图像都会再次链接到该函数,因此点击< div>
再次隐藏它,但点击另一个链接不会使可见的< div>
再次消失。
在此先感谢您。
>为什么你不使用JQuery?您只需要为每个要隐藏/显示的div添加一个类 < div class =test>这里的内容< / div>
现在您可以使用 show()
和 hide()
来自jquery。
$(。test)。show ();
和 $(。test)。hide();
将显示/隐藏所有div的类测试
。
另外,您还有给你的 show()
和 hide()
函数添加一个效果。
I hope, somebody can explain me where I'm wrong with my code...So I have this function:
function divdisplay(element){
if(document.getElementById(element).style.display == 'none'){
document.getElementById(element).style.display = 'block';
for (var i=0; i<NUMBER_OF_DIVS; i++)
document.getElementById(i).style.display = 'none';
} else
document.getElementById(element).style.display = 'none';
The function displays the divs just fine, but the hiding part is the problem. I want to hide several other <divs>
. The ids
of these other <divs>
are simple numbers, which is why I try to address these elements with the variable i
. But when I click on <div>
#1 while <div>
#2 is already visible, only <div>
#1 appears and <div>
#2 does not disappear.
The <divs>
look like this:
<div id="1" style="display:none;">
<a href="javascript:divdisplay(1);">
<img src="..."/>
</a>
</div>
<div id="2" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
<div id="3" style="display:none;">
...
And they first appear when the corresponding link
<a href="javascript:divdisplay(1);">
<a href="javascript:divdisplay(2);">
<a href=...
is clicked.
The image in each <div>
is linked to the function again, so a click on the image inside the <div>
hides it again, but a click on another link does not make the visible <div>
disappear again. Where did I go wrong?
Thanks in advance anyway.
Why you don't use Jquery? You only have to add a class to each div you want to hide/show
<div class="test">content here</div>
and now you can use show()
and hide()
from jquery.
$(".test").show();
and $(".test").hide();
will show/hide all div's with the class test
.
You also check out show() and hide().
In addition you have chance to add an effect to your show()
and hide()
function.
这篇关于隐藏多个div的功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!