javascript - 嵌套 div 时 jQuery 停止工作

Question

我有一个关于嵌套 div 和应用类的问题。在我的元素中，我有一个 id 为“content”的 div，里面有一个 id 为“imagewrap”的 div，它本身包含图像和一些其他元素。这是 html:

 <div id="content">

    <div id="imagewrap" class="notVisible">
      <img src="Images/Image1.jpg" id="front" />

      <div id="previous" class="buttons" onclick="change(-1);"></div>

      <div id="next" class="buttons" onclick="change(1);"></div>
    </div>

  </div> <!-- end of content -->

我希望该图像淡入，所以我向 div“imagewrap”添加了一个“notVisible”类，我得到了一些 jQuery 删除了这个类并在延迟后添加了一个“visible”类。 js 和 css:

CSS

#content {
    height: 100%;
    width: 100vw;
    background-color: white;
    min-height: 580px;
    text-align: center;}

#imagewrap{
    position: relative;
    z-index: 5;
    display: inline-block;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;}

.notVisible {
    opacity: 0;}

.visible {
    opacity: 1;
    transition: opacity 0.7s ease-in-out;}

js:

function showPicture() {

$( "#imagewrap" ).removeClass( "notVisible" );

$( "#imagewrap" ).addClass( "visible" );

}

    setTimeout(showPicture, 7000);

这按预期工作。只是为了测试，我尝试将类“notVisible”添加到 div“content”中，并像这样更改函数 showPicture():

 function showPicture() {

    $( "#content" ).removeClass( "notVisible" );

    $( "#content" ).addClass( "visible" );

    }

这也适用于图像淡入。我遇到的问题是我现在想通过将我的“内容”div 嵌套在 ID 为“容器”的标签中来重组我的 html，如下所示:

   <section id="container">
     <div id="content">

        <div id="imagewrap" class="notVisible">
          <img src="Images/Image1.jpg" id="front" />

          <div id="previous" class="buttons" onclick="change(-1);"></div>

          <div id="next" class="buttons" onclick="change(1);"></div>
        </div>

      </div> <!-- end of content -->
   </section> <!--end of container-->

当我这样做时，图像停止淡入。我尝试将“notVisible”类应用于“容器”div，并相应地更改 showPicture() 函数，但它不起作用。为什么这不起作用？感谢您的宝贵时间。

Answer 1

阅读这篇文章 What is the difference between <section> and <div>?

section 不是通用元素。用 div 替换您的 section，它应该可以工作。

<div id="container">
     <div id="content">

        <div id="imagewrap" class="notVisible">
          <img src="Images/Image1.jpg" id="front" />

          <div id="previous" class="buttons" onclick="change(-1);"></div>

          <div id="next" class="buttons" onclick="change(1);"></div>
        </div>

      </div> <!-- end of content -->
   </div> <!--end of container-->