jquery получить видимость переключенного div - PullRequest
Новая
       22

jquery получить видимость переключенного div

0 голосов
/ 07 января 2020

У меня есть страница с несколькими кнопками и связанный текстовый div. Я могу переключать видимость текста div, нажимая каждую кнопку. Я хотел бы получить видимость каждого текстового div и использовать его для воссоздания состояния страницы. Как мне получить «видимость» текстовых элементов?

Мой код пока отвечает только «видимым».

Большое спасибо. 

<!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>

1 Ответ

1 голос
/ 07 января 2020

Поскольку 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>
...