Question

我有一个脚本，我需要只运行一个叠加层是不可见的。

所以我使用了以下脚本：

下面的示例，按钮显示/隐藏叠加。控制台日志结果

function overlay() {
  if( $('div#overlay').is(':visible') ){
   	    console.log("visible");
	}
	else {
	    console.log("not visible");
    }
};

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:40%;
     height: 40%;
     text-align:center;
     z-index: 1000;
     display: inline-block;
     background-color: orange;
     /*Flexbox*/
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
}

form.overlay-form {
     width:780px;
}
table.overlay-table {
	position: relative;
	text-align: center;
}
table.overlay-table tr td {
	background: rgb(54, 25, 25); 
	background: rgba(54, 25, 25, 0); 
	border-style: none;
	margin-right: 40%;
	margin-bottom: 30%;
	position: relative;
	text-align: center;
	width: 800px;
}
.button {
  z-index:1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="overlay">
    Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />

编辑：正在纠正。因为它是一个id而不是一个类。现在，当我的叠加层在屏幕上 NOT 时。它回来了 '可见的'。

此脚本始终返回“可见”。帮助！

由于

Answer 1

你几乎犯了一个小错误。由于overlay是id，

if( $('div.overlay').is(':visible')){
    console.log("visible");
}

应该是

if( $('div#overlay').is(':visible')){
    console.log("visible");
}

Answer 2

需要使用if( $('div#overlay').is(':visible')){，因为overlay id不是class： -

if( $('div#overlay').is(':visible')){
   console.log("visible");
}else {
   console.log("not visible");
}

要回答您当前的问题，请使用if( el.style.visibility =='visible' ){，如下所示： -

＆＃13;

function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  if( el.style.visibility =='visible' ){
   	    console.log("visible");
	}
	else {
	    console.log("not visible");
    }
};

＆＃13;

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:40%;
     height: 40%;
     text-align:center;
     z-index: 1000;
     display: inline-block;
     background-color: orange;
     /*Flexbox*/
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
}

form.overlay-form {
     width:780px;
}
table.overlay-table {
	position: relative;
	text-align: center;
}
table.overlay-table tr td {
	background: rgb(54, 25, 25); 
	background: rgba(54, 25, 25, 0); 
	border-style: none;
	margin-right: 40%;
	margin-bottom: 30%;
	position: relative;
	text-align: center;
	width: 800px;
}
.button {
  z-index:1000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
    Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />

＆＃13;

原因： -

基于文档： - https://api.jquery.com/visible-selector/

如果元素占用文档中的空间，则会将其视为可见。

由于叠加div总是得到visibility:hidden所以基本上它的空间就在那里，这就是为什么:visible总是返回true的原因。

如果您想使用:visible，请执行display:none;和display:block;

is（：visible）返回true，即使overlay隐藏了jQuery

2 个答案: