Cheking if div is visible
本问题已经有最佳答案,请猛点这里访问。
我正在使用popcorn.js,它创建以下HTML代码:
1 | Hello |
但现在我正尝试使用jquery向
我试过
任何帮助都将不胜感激!
**编辑**
整个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的选择器可见,因此您可以检查
要查看子DIV是否可见,可以执行以下操作-
$('#row-1').children().is(':visible')
!$('#row-1').children().is(':hidden')
$('#row-1').children().css('display') == 'none'
但要回答你的问题,你可以这样做-
如果要查找
$('#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 } |