Cheking если ДИВ видна

Я использую Popcorn.js и создает следующий HTML-код:Cheking если ДИВ видна

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

Но теперь я пытаюсь добавить/удалить .myClass к .test с помощью JQuery, когда DIV внутри #row1 является display: inline.

Я попытался .height(), .lenght() и .width() (но это одна не работает, потому что ширина DIV всегда 1246px)

Любая помощь будет принята с благодарностью!

** EDIT **

Весь HTML код:

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

источник

2014-12-23 Matheus Souza

пытаются с '$ (эл) .а («: visible») ' – juvian

JQuery имеет селектор visible, чтобы Вы могли проверить .is(':visible')

источник

2014-12-23 19:08:07

Поскольку первый DIV имеет идентификатор мы может использовать его для захвата своего первого ребенка и проверить, соответствует ли отображаемое значение этого ребенка встроенным.

// pure javascript 

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

источник

2014-12-23 19:11:47

Похоже, это правильный ответ, но вы можете немного его расширить, чтобы объяснить, почему это решает проблему. – brandonscript

Чтобы увидеть, если ребенок ДИВ видно, что вы можете сделать следующее -

$ ('# строка-1') дети() есть (': видимый')
..
$ ('# строка-1') дети() есть!.. (': скрытый')..

$ ('# строка-1') дети() CSS ('дисплей') = = 'none'

Но чтобы ответить на ваш вопрос, вы можете сделать что-то вроде этого -

Если вы хотите посмотреть на display: inline, вы можете сделать следующее. -

$ («# рядных-1») дети () .filter ('DIV [стиль = дисплей: встроенный]') addClass ('MyCLASS')

Если вы хотите увидеть, если она видна, а затем добавить/удалить класс, вы можете сделать. -

$ ('# строка-1') дети() фильтр (': скрытый')... AddClass ('MyCLASS') // или removeClass

источник

2014-12-23 19:27:34

' none' не является объявленной переменной –

Извините .. Не заметил, что –

Cheking если ДИВ видна

ответ

Смежные вопросы