javascript - 隐藏多个div的函数

Question

我希望有人能解释我的代码哪里错了......所以我有这个功能:

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> 。 ids其中其他<divs>是简单的数字，这就是为什么我尝试使用变量 i 来寻址这些元素。 。但是当我点击 <div> #1 而 <div> #2 已经可见，仅<div> #1 出现并且 <div> #2 不会消失。 <divs>看起来像这样:

    <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;">
      ...

并且它们第一次出现时对应的链接

    <a href="javascript:divdisplay(1);">
    <a href="javascript:divdisplay(2);">
    <a href=...

被点击。

每个 <div> 中的图像再次链接到该函数，因此单击 <div> 内的图像再次隐藏它，但是单击另一个链接不会使 <div> 可见。再次消失。我哪里出错了？

无论如何，提前致谢。

Answer 1

为什么不使用 Jquery？您只需为每个要隐藏/显示的 div 添加一个类

<div class="test">content here</div>

现在您可以在 jquery 中使用 show() 和 hide()。

$(".test").show(); 和 $(".test").hide(); 将显示/隐藏所有带有类测试。

您还可以查看show()和 hide() .

此外，您还有机会向 show() 和 hide() 函数添加效果。