Question

我正在使用Popcorn.js并创建以下HTML代码：

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

但是，当.myClass中的div为.test时，我正在尝试使用jQuery向#row1添加/删除display: inline。

我已尝试过.height()，.lenght()和.width()（但这个不起作用，因为div的宽度始终为1246px）

非常感谢任何帮助！

** 编辑 **

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

Answer 1

jQuery有选择器visible，因此您可以检查.is(':visible')

Answer 2

要查看子div是否可见，您可以执行以下操作 -

$（＆＃39;＃行-1＆＃39）的儿童（）为（＆＃39;：可见＆＃39）。
     ！。
$（＆＃39;＃行-1＆＃39）的儿童（）为（＆＃39;：隐藏＆＃39）

$（＆＃39;＃row-1＆＃39;）。children（）。css（＆＃39; display＆＃39;）==＆＃39; none＆＃39;

但要回答你的问题，你可以做这样的事情 -

如果您想查找display: inline，可以执行以下操作 -

$（＆＃39;＃row-1＆＃39;）。children（）。filter（＆＃39; div [style * = display：inline]＆＃39;）。addClass（＆＃39; <强> MyClass的＆＃39）

如果您想查看它是否可见，然后添加/删除课程，您可以执行以下操作 -

。
$（＆＃39;＃行-1＆＃39）的儿童（）过滤器（＆＃39;：隐藏＆＃39）。addClass（＆＃39;的 myClass的＆＃39;）//或removeClass

Answer 3

由于第一个div有一个id，我们可以用它来抓住它的第一个孩子并检查该孩子的显示值是否等于内联。

// pure javascript

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

检查div是否可见

3 个答案: