При щелчке следующего активного элемента с определенным классом функция триггера

У меня есть ползунок с несколькими панелями, которые скользят внутрь и наружу с помощью стрелок. Функция для следующей стрелки такова:

var element = $('.projects .popup.active'),    
    next = $('.slider.projects #next'),
    prev = $('.slider.projects #prev'),
    oleft = element.offset().left,
    oright = ($(window).width() - (element.offset().left + element.outerWidth()));

next.unbind("click").on('click', function(e){   
        e.preventDefault();
        $(document).scrollTop(0);
        $('.projects .popup').not(element).removeClass('active');
        element.next('.popup').addClass('active');
        element.prevAll('.popup').css({zIndex: -1});
        element.prevAll('.popup').css({left:'-100%', margin: 0});
        element.nextAll('.popup').css({left:'100%', margin: 0});

        element.removeClass('active');
        element = $('.projects .popup.active');

        element.animate({
            left: '50%',
            marginLeft: -352.5
        },500);
        element.next('.popup').animate({
            left: $(window).width() - (oright / 2),
            marginLeft: 0
        },500);
        element.prev('.popup').animate({
            left: - elemWidth + (oleft / 2),
            marginLeft:0
        }, 500);
        checkarrow();
    });

Я хотел бы, чтобы также при нажатии на следующую или предыдущую видимую панель срабатывала следующая и предыдущая функция. Итак, для следующей панели я сделал это:

element.next('.popup').on('click', function(e){
    next.trigger('click');
});

Это работает нормально в первый раз, но во второй раз щелчок работает только в первый раз.

element.next('popup')

который был нажат в первый раз. Активный класс обновляется нормально, но щелчок не работает на следующей панели. Я не могу найти решение.

Вот скрипт http://jsfiddle.net/3sSz2/

Любая помощь могла бы быть полезна. заранее спасибо

Обновить

Благодаря f00bar мне удалось заставить следующие коробки скользить нормально. Предыдущие, хотя и не работают должным образом. Проблема должна быть в строке 100, возможно, в строке 103 в этой скрипте http://jsfiddle.net/3sSz2/11/ .

При нажатии на следующее поле (тот, что справа) или следующую стрелку, появляется следующий слайд, и снова следующий после этого делает то же самое. При нажатии на центральный активный слайд ничего не должно происходить. При нажатии на предыдущую стрелку или предыдущее поле (тот, что слева) поле слева должно скользить к центру, а центральное поле должно двигаться вправо.

Пожалуйста, помогите, я знаю, что почти у цели. Спасибо


person Jeff    schedule 21.10.2013    source источник
comment
Поиграй пожалуйста, тогда я смогу помочь ;)   -  person Stphane    schedule 21.10.2013
comment
Спасибо, f00bar, вот скрипт jsfiddle.net/3sSz2. Как вы увидите, когда вы нажмете на следующее поле, оно встанет нормально. Затем нажатие на третье поле не сработает, но повторное нажатие на второе поле сработает. Но это неправильно. Спасибо еще раз   -  person Jeff    schedule 21.10.2013
comment
Что бы вы хотели, чтобы произошло при нажатии на последнее поле?   -  person Stphane    schedule 21.10.2013
comment
Что последний ящик скользит в центр, а второй ящик скользит влево, и так далее, если после третьего ящика есть еще ящики. Я надеюсь, что мой код имеет смысл. Спасибо за ваше время :)   -  person Jeff    schedule 21.10.2013
comment
Я не уверен, что вы на самом деле хотите, чтобы слайдер отображал... проверьте эту версию скрипта   -  person Stphane    schedule 21.10.2013
comment
Это удивительно, вы удивительны, но не совсем так. Активный ползунок не должен иметь эффекта щелчка и скольжения, только следующий. Кроме того, мой плохой, я не упомянул, что есть и предыдущая стрелка, и поэтому при нажатии на предыдущее поле она скользит в противоположном направлении. Взгляните на новую скрипту jsfiddle.net/3sSz2/7. Спасибо   -  person Jeff    schedule 21.10.2013
comment
Функциональность, которую вы создали, почти готова. При нажатии на следующее поле (тот, что справа) или следующую стрелку, появляется следующий слайд, и снова следующий после этого делает то же самое. При нажатии на центральный активный слайд ничего не должно происходить. При нажатии на предыдущую стрелку или предыдущее поле (тот, что слева) поле слева должно скользить к центру, а центральное поле должно двигаться вправо. Большое спасибо еще раз   -  person Jeff    schedule 21.10.2013
comment
Должен ли он зацикливаться? ... Что происходит, когда последнее поле находится посередине, а затем нажимают кнопку «Далее»?   -  person Stphane    schedule 21.10.2013
comment
Ну, если бы у него была функция цикла, это было бы идеально, но в настоящее время у него нет цикла. Когда последнее поле находится в середине, кнопка «Далее» исчезает. Вы видели мое последнее обновление? Появилась новая скрипта Еще раз спасибо, @f00bar   -  person Jeff    schedule 21.10.2013
comment
давайте продолжим это обсуждение в чате   -  person Stphane    schedule 22.10.2013


Ответы (1)


Наконец, это то, что у меня получилось, и я надеюсь, что это поможет, учитывая время, которое я потратил на написание ЭТОЙ скрипки Oo

Я прикрепил обработчик кликов к элементу .slider, чтобы избежать нескольких прослушивателей. Здесь это обработчик.

$('.slider').click(function (e) {
    var $slider = $(this),
        data = $slider.data('slider'),
        $slides = $slider.find('.popup'),
        $first = $slides.eq(0),
        $last = $slides.last(),
        $activeItem = $slides.filter('.active'),
        $next = $('.popup-nav.next', this),
        $prev = $('.popup-nav.prev', this),
        $t = $(e.target).closest('.popup, .popup-nav'),
        $nextItem = $activeItem.next('.popup'),
        $prevItem = $activeItem.prev('.popup'),
        way = (
            // Is the target be the next item in the DOM or the 'next arrow'
            ($t.is('.popup-nav.next') || $t.is($nextItem)) ? -1 :
            // Is the target be the next item in the DOM or the 'prev arrow'
            ($t.is('.popup-nav.prev') || $t.is($nextItem)) ? 1 : 0
        );

    switch (way) {
    // previous
    case 1:
        // if the active slide is the last project
        if ($activeItem.is($first)) {
            $first.before($last.css({
                left: +($first.css('left').replace('px', '')) - data.width
            }));
        }
        $activeItem.removeClass('active').prev().addClass('active');
        play.call($slides, {
            way: way,
            width: data.width
        });
        break;
    // next
    case -1:
        // if the active slide is the last project
        if ($activeItem.is($last)) {
            $last.after($first.css({
                left: +($last.css('left').replace('px', '')) + data.width
            }));
        }
        $activeItem.removeClass('active').next().addClass('active');
        play.call($slides, {
            way: way,
            width: data.width
        });
        break;
    }
});
person Stphane    schedule 21.10.2013
comment
Привет @Jeff, я забыл установить мое последнее редактирование скрипки в качестве базового сценария .. щелчок по предыдущему элементу действительно работает [можете ли вы это подтвердить?], и я мог бы где-нибудь установить некоторые флаги, чтобы предотвратить коллизии анимации ..! Кстати, я все еще могу помочь вам с вашим проектом ... но с этого момента мы должны обсудить в личных сообщениях, я думаю, ;) Пинта !? Какое внимание :D - person Stphane; 22.10.2013
comment
Спасибо, это работает потрясающе! Как я могу связаться с вами в частном порядке? - person Jeff; 22.10.2013