Javascript 测试DIV是否显示的函数只在第二次工作

这个问题非常具体，我不确定任何搜索都会找到类似的答案，所以我的提问就好像这是一个新问题一样

预期行为：

• 单击按钮“mySol”使div My solution可见
• 单击按钮“YASS”使div My solution隐藏，而div YASS solution可见
• 单击按钮“Tak”使div YASS解决方案隐藏，div Takaken解决方案可见

只有在第一次单击所有三个按钮后，此操作才能按预期工作。第一次通过执行以下操作（可通过刷新页面进行重复）：

单击按钮“mySol”使div My solution可见 单击按钮“YASS”使div My solution可见，并使div YASS solution可见 单击按钮“Tak”使div My solution和YASS solution可见，并使div Takaken solution可见 单击按钮“mySol”使div YASS解决方案和Takaken解决方案可见，并使div My解决方案隐藏 单击按钮“YASS”使div Takaken解决方案可见，并使div YASS解决方案隐藏 单击按钮“Tak”可隐藏div Takaken解决方案

可以按任何顺序进行这些操作，并获得相同的结果。再次隐藏最后一个div后，函数正常工作，一次可以看到一个div。我不明白是什么导致了这个问题，需要一些帮助来纠正它

感谢您的帮助

代码如下：

功能访问信息（id）{
var a=document.getElementById（'mySol'）；
var b=document.getElementById（'YASS'）；
var c=document.getElementById（'Tak'）；
var e=document.getElementById（id）；
如果（e==a&&e.style.display==none）{
b、 style.display='none'；
c、 style.display='none'；
}
如果（e==b&&e.style.display==none）{
a、 style.display='none'；
c、 style.display='none'；
}
如果（e==c&&e.style.display==none）{
a、 style.display='none'；
b、 style.display='none'；
}
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

#mySol{display:none；}
#YASS{display:none；}
#Tak{display:none；}

示例解决方案页面
拼图名称
宽度：0
身高：0
框/目标：0
移动/推送：0/0
移动/推送：0/0
移动/推送：0/0
解决方案
我的解决方案
雅斯溶液
高肯溶液

浏览器似乎没有将显示设置为

none

，而是设置为空字符串

'

。因此，该功能可固定如下：

功能访问信息（id）{
var e=document.getElementById（id）；
var eStyle=e.style.display；
//全速
document.getElementById（'mySol'）.style.display=''；
document.getElementById（'YASS'）.style.display=''；
document.getElementById（'Tak'）.style.display=''；
//将样式设置为原始值的位置
e、 style.display=（eStyle='block'）？'''block'；
}

#mySol{
显示：无；
}
#亚斯{
显示：无；
}
#德{
显示：无；
}

示例解决方案页面
拼图名称
宽度：
0
高度：
0
框/目标：
0
移动/推送：
0/0
移动/推送：
0/0
移动/推送：
0/0
解决方案
我的解决方案
雅斯溶液
高肯溶液

e.style.display

仅包含使用内联

style=“display:xxx”

属性设置的样式，而不包含从CSS规则继承的样式。这就是为什么你的代码第一次不起作用

使用

getComputedStyle（e）.getPropertyValue（'display'）

功能访问信息（id）{
var a=document.getElementById（'mySol'）；
var b=document.getElementById（'YASS'）；
var c=document.getElementById（'Tak'）；
var e=document.getElementById（id）；
var eStyle=getComputedStyle（e）.getPropertyValue（'display'）；
如果（eStyle==“无”）{
如果（e==a）{
b、 style.display='none'；
c、 style.display='none'；
}else如果（e==b）{
a、 style.display='none'；
c、 style.display='none'；
}else如果（e==c）{
a、 style.display='none'；
b、 style.display='none'；
}
e、 style.display='block'；
}否则{
e、 style.display='none'；
}
}

#mySol{
显示：无；
}
#亚斯{
显示：无；
}
#德{
显示：无；
}

示例解决方案页面
拼图名称
宽度：
0
高度：
0
框/目标：
0
移动/推送：
0/0
移动/推送：
0/0
移动/推送：
0/0
解决方案
我的解决方案
雅斯溶液
高肯溶液

以下代码可能对您有所帮助

   function visInvis(id) {
       var a = document.getElementById('mySol');
       var b = document.getElementById('YASS');
       var c = document.getElementById('Tak');
       var e = document.getElementById(id);

       var eStyle = getComputedStyle(e).getPropertyValue('display');        

       var display = eStyle == 'none' ? 'block' : 'none';       
       a.style.display = b.style.display = c.style.display = 'none'
       e.style.display = display;
   }

---

e

包含调用

文档的结果。getElementById（id）

，因此它将是

a

、

b

或

c

中的元素之一。您的答案仍然存在他的原始问题：您无法使用

.style

从CSS继承样式。我已经检查过，它工作正常。请参阅文章中的解释。你们能把你们的答案转换成一个堆栈片段来证明它是有效的吗？我明白了。这是因为

eStyle

第一次是

undefined

，所以

eStyle=='block'

是false。我需要替换所有instanc吗