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的{{1}}是简单数字，这就是我尝试使用变量<divs>来解决这些元素的原因。但是，当i＃1已经显示时，我点击<div>＃1时，只会显示<div>＃1，而<div>＃2不会消失。 <div>看起来像这样：

<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>内的图片会再次隐藏它，但点击另一个链接不会显示{{1} }再次消失。我哪里出错了？

无论如何，先谢谢。

Answer 1

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

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

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

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

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

此外，您还可以为show()和hide()功能添加效果。

Answer 2

此函数循环遍历所有div，仅显示您在element

中指定的div

function divdisplay(element){
    for (var i=0; i<NUMBER_OF_DIVS; i++){
        var div = document.getElementById('div'+i);
        if(i == element){
            div.style.display = 'block';
        }else{
            div.style.display = 'none';
        }
    }
}
// As Alnitak suggested, this can be condensed into:
function divdisplay(element){
    for (var i=0; i<NUMBER_OF_DIVS; i++){
        document.getElementById('div'+i).style.display = (i == element)? 'block' : 'none';
    }
}

我不喜欢在这样的小函数中使用jQuery，因为它可以使你免于加载库（-1 HTTP请求），并且本机功能更快。（在此数量的代码中并不重要，但仍然）假设你还没有使用jQuery，那就是。如果你是，这将有效：

假设你为这样的所有元素添加一个类：

<div class="hideMe" id="1" style="display:none;">
  <a href="javascript:divdisplay(2);">
    <img src="..." />
  </a>
</div>

jquery的：

function divdisplay(element){
     $(".hideMe").hide();
     $("#"+element).show();
}

隐藏多个div的功能

2 个答案: