Показать следующий div при нажатии кнопки

Question

Я пытаюсь создать список с пятью элементами списка. По умолчанию отображается только первый элемент, и если я нажму кнопку «Следующий», появится следующий элемент списка (и т. Д.).

После того, как вы дошли до последней кнопки пункта, отключите ее, потому что нет элементов списка слева.

Как я могу достичь такого поведения?

Я нашел этот пример здесь: JavaScript - show next div and hide previous , но этот скрыть предыдущий.

Возможно, его можно комбинировать с функцией addclass, чтобы добавить класс ul siblings, который hasent получил класс?

Спасибо за помощь.

Answer 1

Согласно прилагаемой ссылке, если вы используете тот же код и удаляет строку qElems[i].style.display = 'none';, она работает как вам нравится. Но будет лучше, если вы изучите javascript перед кодированием.

Полный пример (извлеченный из JavaScript - show next div and hide previous с некоторыми изданиями)

var showing = [1, 0, 0]; 
 
var questions = ['q0', 'q1', 'q2']; 
 
function next() { 
 
    var qElems = []; 
 
    for (var i = 0; i < questions.length; i++) { 
 
     qElems.push(document.getElementById(questions[i])); 
 
    } 
 
    for (var i = 0; i < showing.length; i++) { 
 
     if (showing[i] == 1) { 
 
      showing[i] = 0; 
 
      if (i == showing.length - 1) { 
 
       document.getElementById("buttonNext").disabled = "disabled"; 
 
      } else { 
 
       qElems[i + 1].style.display = 'block'; 
 
       showing[i + 1] = 1; 
 
      } 
 
      break; 
 
     } 
 
    }  
 
}

<div id="questions"> 
 
<div id="q0"> 
 
<h3>1. The color of the sky is... </h3> 
 
<input type="radio" name="question0" value="A">Green<br> 
 
<input type="radio" name="question0" value="B">Blue<br> 
 
<input type="radio" name="question0" value="C">Red<br> 
 
<input type="radio" name="question0" value="D">Purple<br> 
 
</div> 
 
<div id="q1" style="display: none"> 
 
<h3>2. Paper comes from... </h3> 
 
<input type="radio" name="question1" value="A">Water<br> 
 
<input type="radio" name="question1" value="B">Cement<br> 
 
<input type="radio" name="question1" value="C">Trees<br> 
 
<input type="radio" name="question1" value="D">The Sky<br> 
 
</div> 
 
<div id="q2" style="display: none"> 
 
<h3>3. How many hours in a day? </h3> 
 
<input type="radio" name="question2" value="A">24<br> 
 
<input type="radio" name="question2" value="B">22<br> 
 
<input type="radio" name="question2" value="C">16<br> 
 
<input type="radio" name="question2" value="D">48<br> 
 
</div> 
 
</div> 
 
    
 
<button onclick="next()" id="buttonNext">Next Question</button>

Answer 2

Я только что сделал это с помощью JQuery:

$(document).on('click','button.next', function(){ 
 
    var childID = $('#list li').index($('li.display')); 
 
    $('#list li:eq(' + childID + ')').toggleClass('display') 
 
    $('#list li:eq(' + (childID + 1) + ')').toggleClass('display') 
 
})

\t li{ 
 
    display: none; 
 
} 
 
li.display{ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
\t <li class="display">1</li> 
 
\t <li>2</li> 
 
\t <li>3</li> 
 
\t <li>4</li> 
 
\t <li>5</li> 
 
</ul> 
 
<button class="next">Next One</button>

Answer 3

Вот HTML, в котором вы создаете список из пяти элементов, причем первый элемент отображается по умолчанию, а остальное скрыто.

HTML код

<div class='demo'>1</div> 
<div class='demo' style='display:none;'>2</div> 
<div class='demo' style='display:none;'>3</div> 
<div class='demo' style='display:none;'>4</div> 

<button class='next'>Next</button> 

Здесь кнопка в действии next при нажатии на кнопку Далее, она показывает следующий т.е. элемент списка на первом нажмите он будет отображать второй элемент и скрывает все остальное. Это будет продолжаться до длины вашего списка.

JS код

var n = 2 
$('.next').click(function(e){ 
    $('.demo').hide(); 
    $('.demo:nth-child('+n+')').show(); 
    var demo_l = $('.demo').length; 
    if(n == demo_l){ 
     $('.next').attr('disabled', 'disabled'); 
    } 
    n++; 
}); 

Вот это jsfiddle