按下按钮时显示下一个 div

Question

我正在尝试创建一个包含五个列表项的列表。默认情况下，只显示第一个项目，如果我按下“下一个”按钮，它会显示下一个列表项目（依此类推）。

在到达最后一项按钮后应该禁用，因为没有剩余的列表项。

我怎样才能实现这种行为？

我在这里找到了这个例子：JavaScript - show next div and hide previous 但这一个隐藏了前一个。

也许可以结合“addclass”函数来添加尚未获得类的类ul兄弟？

感谢您的帮助。

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')
})

	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">
	<li class="display">1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<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