Question

我有一个滑块，其中一些面板使用箭头滑入和滑出。下一个箭头的功能是：

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/。

当点击下一个框（右边的那个）或下一个箭头时，下一张幻灯片会滑入，然后再次下一张幻灯片同样的事情。单击中央活动幻灯片时，不会发生任何事情。单击上一个箭头或上一个框（左侧的那个）时，左侧的框应滑动到中心，中央框应该向右移动。

请帮忙，我知道我差不多了。感谢

Answer 1

最后，这是我最终的结果，我希望这有助于考虑我写作THIS fiddle Oo

的时间

我在.slider元素上附加了click处理程序以避免多个侦听器。这是处理程序。

$('.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;
    }
});

单击具有特定类，触发器功能的下一个活动元素

1 个答案: