按钮需要点击 2 次才能换出 div
Posted
技术标签:
【中文标题】按钮需要点击 2 次才能换出 div【英文标题】：Button requires 2 clicks to swap out div 【发布时间】：2019-04-01 06:01:52 【问题描述】：单击按钮时，我有一个简单的 div 换出。但是，当页面第一次加载时，它需要用户在按钮上单击两次才能使该功能起作用。之后一切正常。请问有什么建议吗？
我的代码：
<script type="text/javascript">
function SwapDivsWithClick(div1, div2)
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if (d2.style.display == "none")
d1.style.display = "none";
d2.style.display = "block";
else
d1.style.display = "block";
d2.style.display = "none";
</script>
<style>
#swapper-other
width: 200px;
height: 50px;
background-color: darkred;
color: #fff;
display: none;
#swapper-first
width: 200px;
height: 50px;
background-color: yellowgreen;
color: #444;
</style>
<div id="swapper-first">
<p>
<a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
</p>
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other">
<a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
<p>
This div displayed when the link was clicked.
</p>
</div>
【问题讨论】：
【参考方案1】：为了在途中检测样式，您应该改用getComputedStyle方法。
以下更新版本的代码与您的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#swapper-other
width: 200px;
height: 50px;
background-color: darkred;
color: #fff;
display: none;
#swapper-first
width: 200px;
height: 50px;
background-color: yellowgreen;
color: #444;
</style>
<script type="text/javascript">
function SwapDivsWithClick(div1, div2, e)
let d1 = document.getElementById(div1);
let d2 = document.getElementById(div2);
let computedStyleD1 = window.getComputedStyle(d1, null);
let computedStyleD2 = window.getComputedStyle(d2, null);
if (computedStyleD2.display == "none")
d1.style.display = "none";
d2.style.display = "block";
else
d1.style.display = "block";
d2.style.display = "none";
e.stopPropagation();
</script>
</head>
<body>
<div id="swapper-first">
<p>
<a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
</p>
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other">
<a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
<p>
This div displayed when the link was clicked.
</p>
</div>
</body>
</html>
【讨论】：
感谢百事可乐。作为一个“前端”黑客，在后端学习一些真实的东西是很棒的。感谢您提供完整的代码。像魅力一样工作！【参考方案2】：问题是你的css显示值没有被JSd2.style.display捕获
而是尝试以下
function SwapDivsWithClick(div1, div2)
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
style = getComputedStyle(d2);
if (style.display == "none")
d1.style.display = "none";
d2.style.display = "block";
else
d1.style.display = "block";
d2.style.display = "none";
这将在调用时获取 css。
【讨论】：
【参考方案3】：当您在 if 之前执行 console.log(d2.style.display); 时，它不会显示任何内容（空字符串），至少在我的 chrome 中。这就是为什么它不是= "none"。
因此，if (d2.style.display == "none") 不会评估为真。
改为
if (d2.style.display != "block")
它会起作用的！
进一步调查：
console.log("typeof d2.style.display: "+typeof(d2.style.display));
console.log("length of d2.style.display: "+d2.style.display.length);
// OUTPUT:
// typeof d2.style.display: string
// length of d2.style.display: 0
进一步调查：
在css中display: none;会产生一个隐藏的div，但是js中没有设置该值。
如果我在display: xyz; 中添加类似“xyz”的内容，它会显示出来，但该值未在 js 中设置。
如果我写 display: 'none'; div 不是隐藏的（当然），但 if 评估...
最后：我无法让console.log(d2.style.display); 显示任何内容，除非它在引号中或通过javascript 设置。
【讨论】：
谢谢杰夫！我理解您的推理，这让我无法理解。以上是关于按钮需要点击 2 次才能换出 div的主要内容，如果未能解决你的问题，请参考以下文章
显示/隐藏 DIV 元素 Javascript 的多次不需要的点击
用js实现点击按钮 显示div 然后两秒后消失 但是只能执行一次 怎么才能做到可以重复调用 求助