JQuery:如果div是可见的

Question

我正在使用JS作为改变我正在创建的SPA内容的一种方式.当我按下按钮更改内容时,HTML会从此更改:

<div id="selectDiv" style="display: none;">

对此:

<div id="selectDiv" style>

现在我的SPA的一部分有一个包含许多复选框的div,每个复选框代表一个div,所以当我按下提交按钮时,应该显示的下一个div将是所选复选框列表中的第一个项目.

我想知道JQuery中是否有一种方法可以"几乎检测到"哪个div现在可见.这样的事情:

if($('#selectDiv').isVisible()){
    //JS code associated with this div.
}

有什么建议？

Answer 1

您可以使用 .is(':visible')

选择所有可见的元素.

例如:

if($('#selectDiv').is(':visible')){

此外,您可以通过以下方式获得可见的div:

$('div:visible').callYourFunction();

实例:

console.log($('#selectDiv').is(':visible'));
console.log($('#visibleDiv').is(':visible'));

#selectDiv {
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectDiv"></div>
<div id="visibleDiv"></div>