隐藏多个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（）和。

另外，您还有给你的 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屋！