如何知道我是否已經到達最后一個“ li”項目

Question

我用“ li”標簽和jquery進行了幻燈片放映。

整個“ ul”分別移至“下一個/上一個”按鈕的左側或右側，其寬度等於放在一起的所有幻燈片的總寬度，即每個幻燈片700像素。 只能在寬度等於700像素的視口中顯示1張幻燈片。 但是，當我單擊下一步時，即使沒有更多的幻燈片，該節目仍在繼續。

解決方法是在視口中顯示最后一張幻燈片時隱藏“下一步”按鈕。 我怎么做？

或者也許歡迎其他解決方案...

這是我的簡化代碼：

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

如果當前有一個特定的class 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') 。