Как узнать, достиг ли я последнего пункта 'li' - PullRequest
Новая
       10

Как узнать, достиг ли я последнего пункта 'li'

0 голосов
/ 19 января 2011

Я сделал слайд-шоу с тегами 'li' и jquery.

Весь 'ul' перемещается влево или вправо в соответствии с кнопками Next / Prev и имеет ширину, равную общей ширине всех слайдов, вместе взятых, то есть по 700 пикселей каждая И только 1 слайд может отображаться в окне просмотра шириной, равной 700 пикселей. Но когда я нажимаю «Далее», шоу продолжается, хотя слайдов больше нет.

Решение состоит в том, чтобы скрыть кнопку «Далее», когда в окне просмотра отображается последний слайд. Как мне это сделать?

Или, может быть, приветствуется другое решение ...

Это мой упрощенный код: 

var slideList = $('#slideWindow ul')

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

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

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

        $(this).hide();

    } else {

        $(this).show();

    }

    return false;

});

1 Ответ

6 голосов
/ 19 января 2011

Если существует определенный класс 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'), если вы хотите отменить анимацию.

...