jQuery:判断DIV的可见性

Cheking if div is visible

本问题已经有最佳答案,请猛点这里访问。

我正在使用popcorn.js,它创建以下HTML代码:

1
    Hello

但现在我正尝试使用jquery向.test添加/删除.myClass,当#row1中的DIV为display: inline时。

我试过.height().lenght().width()(但这个不行,因为div的宽度总是1246px)

任何帮助都将不胜感激!

**编辑**

整个HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js">

    <script src="js/jquery-1.11.2.min.js">

        <style>
        .myClass{
          background: yellow !important;
        }
        </style>

   
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {

           // Create a popcorn instance by calling the Youtube player plugin
         var example = Popcorn.youtube(
           '#video',
           'https://www.youtube.com/embed/w9l4v1s9148?controls=1' );

         example.footnote({
           start: 1.2,
           end: 1.7,
           text:"Hello",
           target:"row-1"
         });

         example.footnote({
           start: 1.7,
           end: 3.2,
           text:"boys and girls",
           target:"a2"
         });

         example.footnote({
           start: 3.2,
           end: 4.8,
           text:"my name is FatLip,",
           target:"a3"
         });

         example.footnote({
           start: 4.8,
           end: 7,
           text:"and this is my friend, Simon the Salmon.",
           target:"a4"
         });


      }, false);
   
</head>

<body>
 

 
 
 
 

 
</body>
</html>


jquery的选择器可见,因此您可以检查.is(':visible')


要查看子DIV是否可见,可以执行以下操作-

$('#row-1').children().is(':visible')

!$('#row-1').children().is(':hidden')

$('#row-1').children().css('display') == 'none'

但要回答你的问题,你可以这样做-

如果要查找display: inline,可以执行以下操作-

$('#row-1').children().filter('div[style*=display: inline]').addClass('myClass')

如果要查看它是否可见,然后添加/删除类,可以执行以下操作-

$('#row-1').children().filter(':hidden').addClass('myClass') // or removeClass


由于第一个DIV有一个ID,我们可以使用它来获取它的第一个子级,并检查该子级的显示值是否等于inline。

1
2
3
4
5
// pure javascript

if (document.getElementById('row-1').firstChild.style.display === 'inline') {
    // add/remove class
}