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

Question

我用“li”标签和 jquery 制作了一个幻灯片。

整个“ul”相对于“下一张”/“上一张”按钮向左或向右移动，其宽度等于所有幻灯片加在一起的总宽度，即每张 700 像素。并且在宽度等于 700px 的视口(viewport)中只允许显示 1 张幻灯片。但是当我单击“下一步”时，即使没有更多幻灯片，节目也会继续。

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

或者也许欢迎其他解决方案......

这是我的简化代码:

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

如果有一个特定的类 classBeingViewed 应用于当前正在查看的 li，您可以执行以下操作:

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