最後の 'li'アイテムに到達したかどうかを知る方法

Question

私は 'li'タグとjqueryでスライドショーを作成しました。

「ul」全体が「次へ」/「前へ」ボタンの左右に移動し、合計スライドの合計幅、つまりそれぞれ700pxに等しい幅を持ちます。また、700pxに等しい幅のビューポートに表示できるスライドは1つだけです。しかし、私が次をクリックすると、スライドがなくなってもショーは続きます。

解決策は、最後のスライドがビューポートに表示されたら[次へ]ボタンを非表示にすることです。それ、どうやったら出来るの？

それとも別の解決策は大歓迎です...

これは私の簡素化コードです：現時点で表示されているliに適用される特定のクラスclassBeingViewedがある場合はあなたができる、

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

次のようにしてください：

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; 
}); 

その後、あなたは$('#previous')にクリックハンドラでlistIndexをデクリメントすることができます。