1

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

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。但是当我在#2 已经可见的情况下单击<div>#1 时，只出现#1 而#2 并没有消失。看起来像这样：<div><div><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>中的图像再次链接到该功能，因此单击其中的图像<div>再次隐藏它，但单击另一个链接不会使可见<div>再次消失。我哪里做错了？

无论如何提前谢谢。

4

2 回答 2

1

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

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

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

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

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

此外，您还有机会为您的show()和hide()功能添加效果。

于 2012-11-21T10:37:32.447 回答
0

这个函数循环遍历你所有的 div 并且只显示你指定的那个element

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();
}
于 2012-11-21T10:38:18.413 回答