Question

我一直试图解决这个问题，我创建了一个简单的模式，用于呈现项目并在其上添加过滤/导航。当所有选中时，我都可以循环浏览ul，但是当我选择过滤器时，导航会变得混乱。以下是jquery代码，可以查看任何帮助，可以查看页面here

//FILTERING
$('.portfolio-filter li a').click(function(){
    var ourFilter = $(this).attr('class');
    if($(this).hasClass('active')) {
        return false;
    } else {
        $('.portfolio-filter li a').removeClass('active');
        $(this).addClass('active');
    }
    if(ourFilter == 'all') {
        $('#portfolio-container .row.collection').children('div.item').show();
    } else {
        $('#portfolio-container .row.collection').children('div:not(.' + ourFilter + ')').hide();
        $('#portfolio-container .row.collection').children('div.' + ourFilter ).show();
    }
    return false;
});
//GALLERY
$('ul.project, ul.project.active').click(function(e){
    e.preventDefault();
    if($('ul.project').hasClass('active')) {

    } else {
        $(this).addClass('active');
    }
    var projecttitle = $('ul.project.active').attr('projecttitle');
    var projectdescription = $('ul.project.active').attr('projectdescription');
    var prevProject = $('ul.project.active').closest('div.four.columns').prev(':visible').find('ul.project');
    var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project');
    var overlay =
    '<div id="overlay" onclick="">' +
        '<div class="row">' +
            '<div class="seven columns">' +
                '<div class="modal animated bounceInUp loader">' +
                    '<div class="project-content" style="opacity: 0"></div>' +
                '</div>' +
            '</div>'
        '</div>' +
    '</div>';
    var modal =
    '<div class="close" onclick="">&#9660; TAP TO CLOSE &#9660;</div>' +
    '<div class="project-navigation">' +
        '<div class="prev-project" onclick="">&#9668;</div>' +
        '<div class="next-project" onclick="">&#9658;</div>' +
        '<div class="current-project">' +
            '<h3>' + projecttitle + '</h3>' +
            '<p>' + projectdescription + '</p>' +
        '</div>' +
    '</div>';

    if ($('#overlay').length > 0){
        $('.project-content').fadeTo(0,0, function(){
            $('.modal').addClass('loader');
            $('.project-content').html('');
            $('.project-content').append(modal);
            if($(prevProject).length == 0){
                $('.prev-project').addClass('disabled');
            } else {
                $('.prev-project').removeClass('disabled');
            };
            if($(nextProject).length == 0){
                $('.next-project').addClass('disabled');
            } else {
                $('.next-project').removeClass('disabled');
            };
            $('.active').find('.lightbox').each(function(){
                var $href = $(this).attr('href');
                $('.project-content').append(
                    '<img src="' + $href + '">'
                );
            });

            var imgs = $('.project-content > img').not(function(){
                return this.complete;
            })

            var count = imgs.length;
            if (count){
                imgs.load(function(){
                    count--;
                    if(!count){
                        $('.modal').removeClass('loader');
                        $('.project-content').fadeTo(0,1);
                    }
                });
            } else {
                $('.modal').removeClass('loader');
                $('.project-content').fadeTo(0,1);
            };
        });
    } else {
        $('body').append(overlay);
        $('body').addClass('modal-open');
        $('.project-content').append(modal);
        if($(prevProject).length == 0){
            $('.prev-project').addClass('disabled');
        } else {
            $('.prev-project').removeClass('disabled');
        };
        if($(nextProject).length == 0){
            $('.next-project').addClass('disabled');
        } else {
            $('.next-project').removeClass('disabled');
        };

        $('.active').find('.lightbox').each(function(){
            var $href = $(this).attr('href');
            var screenheader = $(this).attr('screen');
            $('.project-content').append(
                '<img src="' + $href + '">'
            );
        });

        var imgs = $('.project-content > img').not(function(){
            return this.complete;
        })
        var count = imgs.length;
        if (count){
            imgs.load(function(){
                count--;
                if(!count){
                    $('.modal').removeClass('loader');
                    $('.project-content').fadeTo(0,1);
                }
            });
        } else {
            $('.modal').removeClass('loader');
            $('.project-content').fadeTo(0,1);
        };
    }
});

$(function(){
    $('.prev-project').live('click', function(e){
        e.stopPropagation();
        var prevProject = $('ul.project.active').closest('div.four.columns').prev(':visible').find('ul.project');
        if($(prevProject).length > 0){
            $('ul.project.active').removeClass('active');
            $(prevProject).addClass('active');
            $('ul.project.active').click();
        };
    });
    $('.next-project').live('click',function(e){
        e.stopPropagation();
        var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project');
        if($(nextProject).length > 0){
            $('ul.project.active').removeClass('active');
            $(nextProject).addClass('active');
            $('ul.project.active').click();
        };
    });
    $('#overlay, .close').live('click', function(e){
        e.stopPropagation();
        $('.modal').addClass('bounceOutDown');
        $('body').removeClass('modal-open');
        $('.project').removeClass('active');
        $('#overlay').delay(500).fadeOut(0, function(){
            $(this).remove();
        })
    });
});

//KEYSTROKES
$(document).keydown(function(e){
    if (e.keyCode == 27) {
        if($('#overlay').length > 0){
            $('.modal').addClass('bounceOutDown');
            $('body').removeClass('modal-open');
            $('.project').removeClass('active');
            $('#overlay').delay(500).fadeOut(0, function(){
                $(this).remove();
            })
        }
    }
    if (e.keyCode == 37) { // PREV
        $('.prev-project').click();
    }
    if (e.keyCode == 39) { // NEXT
        $('.next-project').click();
    }
});

Answer 1

我弄乱了.next-project事件绑定器，发现这个选择器工作了

var nextProject = $('ul.project.active').parent().nextAll(':visible').find('ul.project');

而不是

var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project');

也许您可以使用nextAll和prevAll选择器进行修复。

仅导航可见元素

1 个答案: