jQuery在嵌套div時停止工作

Question

我有一個關於嵌套div和應用類的問題。在我的項目中，我有一個ID爲「內容」的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 --> 

我想要的形象褪色的，所以我增加了一類「notVisible」到div「imagewrap」和我有一些jQuery的刪除此類，並添加類的「看得見「拖延之後。 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「內容」，而不是和改變功能showPicture（）像這樣：

function showPicture() { 

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

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

    } 

，這還與在圖像褪色 的問題。我遇到的是，我想現在用「容器」的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不是一個通用的元素。將section替換爲div，它應該可以工作。

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