Question

我有一个非常简单的js函数来切换div可见性，这是工作版本：

function Toggle(obj) {   
    var state = document.getElementById(obj);
    if (state.style.display === 'block') {
        state.style.display = 'none';
    }
    else {
        state.style.display = 'block';
    }
}

这里obj代表div的id。现在，我在页面上有多个div，并希望当用户打开一个新div时，先前已打开div关闭。我尝试通过修改我的函数来做到这一点：

var prev_obj = 'empty';

 function Toggle(obj) {  
    var state = document.getElementById(obj);
    if (state.style.display === 'block') {
        state.style.display = 'none';
    }
    else {

                if (prev_obj !== 'empty')
                {
        var prev_state = document.getElementById(prev_obj)
        prev_state.style.display = 'none';
                }       
        state.style.display = 'block';

                prev_obj = obj;
    }
}

我想这对js wizards来说是自我解释的，所以我只想说，当我对prev_obj的值进行硬编码时，它可以正常工作，但是当我不这样做时它就没有了，而且firebug显示了它保持初始值（“空”）

如果你拥有它，请帮助赞赏以及任何其他方式。

Answer 1

很难从提供的详细信息中确定您的问题所在。您应该能够使用下面链接的教程开发解决方案。我个人循环遍历所有div，隐藏所有div，然后显示当前的div，而不是持有对最后一个div的引用。

http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

Answer 2

正如我在评论中所写，我怀疑该函数被错误地调用，因为它看起来应该有效。

另一方面，你可以稍微简化逻辑，如果你认为你想要的就是说：“关闭前一个div，无论什么（包括它与当前div相同），并且仅在与前一个div不同的情况下打开当前div “。

我还会将实际元素存储在prev_obj而不是ID中，并最初将其设置为null。它会测试是否有prev_obj更容易，并允许你在必要时使用“空”ID（当然你可能不会，但只是最佳做法）。

var prev_obj = null;

function Toggle(id) { // Call it "id" to be clear it's not the actual object
   // Hide previous object if it exists
   if (prev_obj) prev_obj.style.display = 'none';

   // Show current object if it's the same as the previous one
   var obj = document.getElementById(id);
   if (obj !== prev_obj) {
      obj.style.display = 'block';
      prev_obj = obj;
   }
}

确保通过在id：

周围加上单引号来调用它

<div onclick="Toggle('div-id-here')"></div>

JS变量问题

2 个答案: