Question

JavaScript和jQuery新手在这里，我想问一个问题; 基本上，我有一个列表，在任何给定的时间只显示它的1个元素，但问题是 - 当我到达列表的末尾，并且我想显示下一个元素并隐藏当前元素，而不是一切变得隐藏起来这是代码：

当然，我可以使用last（）设置最后一个元素锚点，给它一个ID，然后如果ID是最后一个元素的ID则不执行命令，但我真的不知道JavaScript的语法如此。

HTML：

<style>
  #
  #container li .active
  {
    display:inline-block;
  }
  #container li .inactive
  {
    display:none;
  }
</style>
</head>
<body>
  <ul id="container">
   <il class='active'>item I</il>
   <il class='inactive'>item II</il>
   <il class='inactive'>item III</il>
   <il class='inactive'>item IIII</il>
   <il class='inactive'>item IV</il>
   </ul>
     <span id='next'>Next</span>
     <span id='prev'>Previous</span> 

<script>
$(".inactive").hide();
$(".active").show();
$("#next").click(function()
                 {
        var nexte=$(".active");
                nexte.addClass("inactive");
        nexte.removeClass("active")
        nexte.next(".inactive").addClass("active");
        nexte.next(".inactive").removeClass("inactive");
        $(".inactive").hide('slow');
        $(".active").show('slow');
});
$("#prev").click(function()
                 {
        var preve=$(".active");
                preve.addClass("inactive");
        preve.removeClass("active")
        preve.prev(".inactive").addClass("active");
        preve.prev(".inactive").removeClass("inactive");
        $(".inactive").hide('slow');
        $(".active").show('slow');
});
</script>

提前致谢，itai。

Answer 1

检查是否存在下一个元素。每个jQuery对象都有一个属性length，表示已选择了多少个元素。如果element.next()返回长度为0的jQuery对象，则表示没有下一个元素。

示例：

$("#next").click(function() {
    var current = $(".active"),
        next = current.next(".inactive");

    if(next.length > 0) { // there exists a next element
        current.add(next)
          .toggleClass("active inactive")
          .toggle('slow'):
    }
});

编辑：删除重复。

参考： .length，.add()，.toggleClass()，.toggle()

DEMO

你可以为另一个方向做同样的事情。

Answer 2

所有内容都变得隐藏，因为您编写的代码不会将活动类添加到不存在的元素中。

nexte.next(".inactive").addClass("active");
nexte.next(".inactive").removeClass("inactive");

当你在列表中的最后一个元素上时，'next'元素是不存在的，因此对addClass / removeClass的调用只是进入void。如果你想要进行某种包装（当你在最后一个元素上单击下一个时，你会看到第一个元素），你会做这样的事情：

var nextElement = nexte.next('.inactive');

if(nextElement.length == 0)
   nextElement = $('.inactive').first(); // wrap to the first object, etc

nextElement.addClass('active').removeClass('inactive');

jquery - 找到最后一个元素而不是改变它的类

2 个答案: