Question

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

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

我如何实现这种行为？

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

也许它可以与“addclass”函数结合使用来添加那些已经获得类的类兄弟姐妹？

感谢您的帮助。

Answer 1

根据您附加的链接，如果您使用相同的代码并删除行qElems[i].style.display = 'none';，则可以按照您的意愿使用。但如果你在编码之前学习javascript会更好。

完整示例（从JavaScript - show next div and hide previous中提取某些版本）

＆＃13;

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

＆＃13;

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

＆＃13;

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 code

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

按下按钮时显示下一个div

3 个答案: