jquery 获得已切换 div 的可见性

Question

我有一个包含多个按钮和关联文本的页面 div。我可以通过单击每个按钮来切换文本 div 的可见性。我想获得每个文本 div 的可见性，并用它来重新生成页面状态。如何获得文本 divs 的“可见性”？

到目前为止，我的代码仅响应“可见”。

非常感谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Visibility</title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
        function getVis(textDiv){
            if ($(textDiv).is(":visible")) {
                alert("visible");
            }else{
                alert("not visible");
            }
        }
    </script>
</head>

<body>
    <button id="btn1" onclick="$(div1).slideToggle(500), getVis(div1)">button 1</button>
    <div id = "div1">div 1 text</div>
    <br>
    <button id="btn2" onclick="$(div2).slideToggle(500), getVis(div2)">button 2</button>
    <div id = "div2">div 2 text</div>
</body>
</html>

Answer 1

由于 slideToggle 是一个转换（随着时间的推移操作），请在调用转换之前 检查可见性 ，即反转调用顺序。例如

 <button id="btn1" onclick="getVis(div1), $(div1).slideToggle(500)">button 1</button>

这是一个演示。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Visibility</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function getVis(textDiv){       
            if ($(textDiv).is(":visible")) {
                alert("visible");
            }else{
                alert("not visible");
            }
        }
    </script>
</head>
  <body>
      <button id="btn1" onclick="getVis(div1), $(div1).slideToggle(500)">button 1</button>
      <div id = "div1">div 1 text</div>
      <br>
      <button id="btn2" onclick="getVis(div2), $(div2).slideToggle(500)">button 2</button>
      <div id = "div2">div 2 text</div>
  </body>
</html>

要在转换后确定可见性状态 ，请像这样从完成例程中调用 getVis

<button id="btn1" onclick="$(div1).slideToggle(500, function() { getVis(div1) })">button 1</button>

这是完成方法的演示。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Visibility</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script> function getVis(textDiv){ if ($(textDiv).is(":visible")) { alert("visible"); }else{ alert("not visible"); } } </script> </head> <body> <button id="btn1" onclick="$(div1).slideToggle(500, function() { getVis(div1) })">button 1</button> <div id = "div1"> div 1 text </div> <br> <button id="btn2" onclick="$(div2).slideToggle(500, function() { getVis(div2) })">button 2</button> <div id = "div2">div 2 text</div> </body> </html>

jquery 获得已切换 div 的可见性

jquery get visibility of toggled div

jquery

visibility

toggle