用javascript代碼顯示和隱藏部分的問題不起作用

Question

大家，我對javascript和HTML部分有疑問。

我需要單擊向下箭頭以將第一個更改為另一個，等等。不幸的是，代碼沒有反應，所以我真的不知道如何解決它。

縮短的代碼以提供更好的概述。

主要問題將在javascript中

HTML

HTML恰好足以更好地面向。

  <section> <div style="width:40px; height:40px; background-color:black;" onclick="bottomscroll()"> </section>
  <section > <h1>text</h1></section>

  <section> <h1>text</h1></section>

  <section> <h1>text</h1></section>

  <section> <h1>text</h1></section>

CSS

我還縮短了CSS以獲得更好的概述

.display-block { display:block; }
.display-none { display:none; } 

#fullpage { overflow: hidden; margin: 0; padding: 0;

}

#fullpage section { min-height: 100%; }

#fullpage section h4 { margin: 0; padding: 0; }

#fullpage section:nth-child(1)
{
   color:black;
    background:url(/img/fabian-grohs-597395-unsplash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

#fullpage section:nth-child(1) h1
{
    margin: 0;
    padding: 0;
    color:whitesmoke;
    text-align: center;
    padding: 70px;
    font-family: 'Montserrat', sans-serif;
    font-size:40px;
}




#fullpage section:nth-child(1) p
{
    text-align: center;
    color:white;
    font-size:18px;
    width: 70%;
    margin:0 auto;
    font-family: 'Inconsolata', monospace;
    position: relative;
}

#fullpage section:nth-child(2)
{
    color:#333;
    background: white;
    min-height: 100vh;
}


#fullpage section:nth-child(2) h1
{
    margin: 0;
    padding: 0;
    color:#333;
    text-align: center;
    padding: 20px 0px;
    font-family: 'Montserrat', sans-serif;
}

#fullpage section:nth-child(3)
{
    color:black;
    background: green;
    min-height: 100vh;
}
#fullpage section:nth-child(4)
{
    color:black;
    background: green;
    min-height: 100vh;
}

#fullpage section:nth-child(5)
{
    color:black;
    background: green;
    min-height: 100vh;
}

使用Javascript

主要問題將在javascript中

var page = 1;

function topscroll()
{
        if(page != 1)
        {
        page -= 1;    
        var page = document.querySelector("#fullpage section:nth-child("+page")");
            for(i = 0; i < 5; i++)
            {
            var pagehidden = document.querySelector("#fullpage section:nth-child("+i")"); 
            pagehidden.classList.add("display-none");   
            pagehidden.classList.remove("display-block");     
            }
        page.classList.add("display-block");    
        }
}

function bottomscroll()
{
        if(page != 5)
        {
        page += 1;    
        var page = document.querySelector("#fullpage section:nth-child("+page")");
            for(i = 0; i < 5; i++)
            {
            var pagehidden = document.querySelector("#fullpage section:nth-child("+i")"); 
            pagehidden.classList.add("display-none");  
            pagehidden.classList.remove("display-block");   
            }
        page.classList.add("display-block");    
        }
}

 var page = 1; function topscroll() { if(page != 1) { page -= 1; var page = document.querySelector("#fullpage section:nth-child("+page")"); for(i = 0; i < 5; i++) { var pagehidden = document.querySelector("#fullpage section:nth-child("+i")"); pagehidden.classList.add("display-none"); pagehidden.classList.remove("display-block"); } page.classList.add("display-block"); } } function bottomscroll() { if(page != 5) { page += 1; var page = document.querySelector("#fullpage section:nth-child("+page")"); for(i = 0; i < 5; i++) { var pagehidden = document.querySelector("#fullpage section:nth-child("+i")"); pagehidden.classList.add("display-none"); pagehidden.classList.remove("display-block"); } page.classList.add("display-block"); } } 

 .display-block { display:block; } .display-none { display:none; } #fullpage { overflow: hidden; margin: 0; padding: 0; } #fullpage section { min-height: 100%; } #fullpage section h4 { margin: 0; padding: 0; } #fullpage section:nth-child(1) { color:black; background:url(/img/fabian-grohs-597395-unsplash.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; } #fullpage section:nth-child(1) h1 { margin: 0; padding: 0; color:whitesmoke; text-align: center; padding: 70px; font-family: 'Montserrat', sans-serif; font-size:40px; } #fullpage section:nth-child(1) p { text-align: center; color:white; font-size:18px; width: 70%; margin:0 auto; font-family: 'Inconsolata', monospace; position: relative; } #fullpage section:nth-child(2) { color:#333; background: white; min-height: 100vh; } #fullpage section:nth-child(2) h1 { margin: 0; padding: 0; color:#333; text-align: center; padding: 20px 0px; font-family: 'Montserrat', sans-serif; } #fullpage section:nth-child(3) { color:black; background: green; min-height: 100vh; } #fullpage section:nth-child(4) { color:black; background: green; min-height: 100vh; } #fullpage section:nth-child(5) { color:black; background: green; min-height: 100vh; } 

  <section> <div style="width:40px; height:40px; background-color:black;" onclick="bottomscroll()"> </section> <section><h1>text</h1></section> <section><h1>text</h1></section> <section><h1>text</h1></section> <section><h1>text</h1></section> 

Answer 1

您的問題是，每次在元素上循環以添加 display-none類，然后刪除 display-block然后在循環之后，將display-block添加到所需的元素，而不刪除循環內添加的display-none 。

代碼應如下所示：

function bottomscroll()
{
        ... 
        page.classList.remove("display-none"); /*added this*/
        page.classList.add("display-block");    
        ...
}

topscroll()邏輯相同

這是只有一個功能的完整工作代碼（糾正了其他錯誤之后）：

 var nb = 1; function bottomscroll() { if (nb != 4) { nb += 1; var page = document.querySelector("#fullpage section:nth-child(" + nb + ")"); for (var i = 1; i < 4; i++) { var pagehidden = document.querySelector("#fullpage section:nth-child(" + i + ")"); pagehidden.classList.add("display-none"); pagehidden.classList.remove("display-block"); } page.classList.remove("display-none"); page.classList.add("display-block"); } } 

 .display-block { display: block; } .display-none { display: none; } #fullpage { overflow: hidden; margin: 0; padding: 0; } #fullpage section { min-height: 100%; } #fullpage section h4 { margin: 0; padding: 0; } #fullpage section:nth-child(1) { color: black; background: url(/img/fabian-grohs-597395-unsplash.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; } #fullpage section:nth-child(1) h1 { margin: 0; padding: 0; color: whitesmoke; text-align: center; padding: 70px; font-family: 'Montserrat', sans-serif; font-size: 40px; } #fullpage section:nth-child(1) p { text-align: center; color: white; font-size: 18px; width: 70%; margin: 0 auto; font-family: 'Inconsolata', monospace; position: relative; } #fullpage section:nth-child(2) { color: #333; background: white; min-height: 100vh; } #fullpage section:nth-child(2) h1 { margin: 0; padding: 0; color: #333; text-align: center; padding: 20px 0px; font-family: 'Montserrat', sans-serif; } #fullpage section:nth-child(3) { color: black; background: green; min-height: 100vh; } #fullpage section:nth-child(4) { color: black; background: green; min-height: 100vh; } #fullpage section:nth-child(5) { color: black; background: blue; min-height: 100vh; } 

 <div style="width:40px; height:40px; background-color:black;" onclick="bottomscroll()"> </div> <div id="fullpage"> <section> <h1>text1</h1> </section> <section> <h1>text2</h1> </section> <section> <h1>text3</h1> </section> <section> <h1>text4</h1> </section> </div>