2014-12-23 12 views
5

sto usando Popcorn.js e crea il seguente codice HTML:Cheking se div è visibile

<div id="row-1"> 
    <div style="display: none;">Hello</div> 
</div> 

Ma ora sto cercando di aggiungere/rimuovere .myClass-.test utilizzando jQuery, quando il div interno #row1 è display: inline.

Ho provato .height(), .lenght() e .width() (ma questo non funziona, perché la larghezza del div è sempre 1246px)

qualsiasi aiuto sarebbe molto apprezzato!


** EDIT **

Il codice HTML intera:

<html> 
    <head> 
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> 

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

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

    <script> 
     // 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); 
    </script> 
</head> 

<body> 
    <div id="video" style="width: 360px; height: 300px;" ></div> 

    <div id="row-1"></div> 
    <div id="a2"></div> 
    <div id="a3"></div> 
    <div id="a4"></div> 

    <div class="test" style="width: 10px; height: 10px; background: black;"></div> 
</body> 
</html> 
+0

provare con '$ (EL) .IS (": visible") ' – juvian

risposta

11

jQuery ha selettore visible modo da poter controllare .is(':visible')

2

Fin dalla prima div ha un id siamo può usarlo per afferrare il suo primo figlio e verificare se il valore di visualizzazione di quel bambino è uguale a quello in linea.

// pure javascript 

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

Sembra che questa sia la risposta giusta, ma potresti volerlo espandere un po 'per spiegare perché questo risolve il problema – brandonscript

3

per vedere se il div bambino è visibile, è possibile effettuare le seguenti operazioni -

$ ('# row-1') bambini() è (': visibile')

..

$ ('# row-1') i bambini() è!.. (': nascosto')..

$ ('# row-1') i bambini() css ('display') = = 'none'

Ma per rispondere alla tua domanda, si può fare qualcosa di simile -

Se si desidera cercare display: inline, si possono fare le seguenti -.

$ ('# fila-1') i bambini () .filter ('div [stile * = display: inline]') addClass ('myClass')

Se volete vedere se è visibile e quindi aggiungere/rimuovere classe, si può fare la. following -

$ ('# fila-1') bambini() filter (': nascosto')... AddClass ('myClass') // o removeClass

+0

' none' non è una variabile dichiarata –

+0

Scusa .. Non ho notato che –