Проблема с разделом показать и скрыть с кодом JavaScript не работает - PullRequest
Новая
       26

Проблема с разделом показать и скрыть с кодом JavaScript не работает

0 голосов
/ 22 октября 2018

каждый, у меня проблема с разделами 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>

1 Ответ

0 голосов
/ 22 октября 2018

Ваша проблема в том, что каждый раз, когда вы перебираете элемент в , добавляете класс 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>
...