我一直试图解决这个问题,我创建了一个简单的模式,用于呈现项目并在其上添加过滤/导航。当所有选中时,我都可以循环浏览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="">▼ TAP TO CLOSE ▼</div>' +
'<div class="project-navigation">' +
'<div class="prev-project" onclick="">◄</div>' +
'<div class="next-project" onclick="">►</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();
}
});
答案 0 :(得分:0)
我弄乱了.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选择器进行修复。