Question

我正在开展一个项目，其中我有一个5 li的ul标签。

我想要做的是，我想通过点击一个按钮逐个显示每个项目。意思是当我点击按钮然后应该显示下一个项目，并且应该隐藏前一个项目。通常发生在quizes中。

当我们点击下一个按钮时，会出现下一个问题，并隐藏上一个问题。

我正在使用以下HTML代码：

<div class="span12" style="margin-top:140px;">
<ul id="part">
<li id="div0" style="display:none;">Question id</li>
<li id="div1" style="display:none;">Question 2</li>
<li id="div3" style="display:none;">Question 3</li>
<li id="div4" style="display:none;">Question 4</li>
<li id="div5" style="display:none;">Question 5</li>
</ul>
<button id="next">Next</button>
</div>

和jquery代码是：

<script>
$(function(){
    var items = $('ul#part li');
    if(items.filter(':visible').length == 0)
    {
        items.first().show();
    }
    $('#next').click(function(e){
        e.preventDefault();
    items.filter(':visible:last').next().show();
    });
});
</script>

按钮点击显示ul的下一项，但我无法隐藏上一个按钮。

当我点击下一步时，如何隐藏上一个li按钮。

请帮帮我

Answer 1

这应该有效

<script>
$(function(){
    var items = $('ul#part li');
    if(items.filter(':visible').length == 0){
        items.first().show();
    }

    $('#next').click(function(e){
        e.preventDefault();

        var active = items.filter(':visible:last');
        active.hide();

        var next = active.next();
        if (next.length)
             next.show();
    });
});
</script>

要检查下一个是否存在，您应检查长度。

Answer 2

使用Arek的答案，将if条件更改为

if (next.length) {
  next.show();
} else {
  $('#next').html("Submit");
}

以便按钮更改为提交。

演示Fiddle

Answer 3

Var index=0;/*this should be global variable*/

('#next').click(function(e){
      e.preventDefault();
      items.hide();
      items[index].show();
      index==items.length-1?index=0:index++;
 });

如何隐藏jquery中的前一个li标签

3 个答案: