如何知道我是否已达到最后'li'项目

Question

我用'li'标签和jquery进行了幻灯片放映。

整个'ul'相对于Next/Prev按钮向左或向右移动，其宽度等于放在一起的所有幻灯片的总宽度，即每个700px。并且只允许在视口中显示1张幻灯片，宽度等于700px。但是，当我点击下一个节目时，尽管没有更多的幻灯片。

解决方法是在最后一张幻灯片显示在视口中时隐藏“下一步”按钮。我怎么做？

或者，也许另一种解决方案是值得欢迎...

这是我的简化代码：

var slideList = $('#slideWindow ul') 

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

    slideList.animate({ 'left': '-=700px' }); 

    if($('li:last').next() === 0){ 

     $(this).hide(); 

    } else { 

     $(this).show(); 

    } 

    return false; 

}); 

Answer 1

如果有某一类应用是目前正在观看liclassBeingViewed，你可以只是这样做：

if($('li').last() == $('li.classBeingViewed')){ 
    $(this).hide(); 
else { 
    $(this).show(); 
} 

或者你可以跟踪索引。这是可取的，因为它允许在两个方向上进行动画。

var slideList = $('#slideWindow ul'); 
var listIndex = 0; 
var numLiElements = $('li').length; 

$('#next').click(function(e){ 
    slideList.animate({ 'left': '-=700px' }); 
    if(listIndex == numLiElements){ 
     $(this).hide(); 
    } else { 
     listIndex += 1; 
     $(this).show(); 
    } 
    return false; 
}); 

然后，您可以在点击处理程序时要反转动画递减listIndex到$('#previous')。