我正在尝试创建一个页面,让您通过类别搜索,并在页面加载时从特定类别开始。
以这个代码开头:http://codepen.io/desandro/pen/mCdbD
现在我有了:http://codepen.io/anon/pen/MaYeMR
我已经弄清楚如何加载一个特定的类别,像这样的页面加载添加一个默认的过滤器:
filter: '.transition'
还学会了如何使用按钮对类别进行排序,如下所示:
$('#filters').on( 'click', 'button', function() {
buttonFilter = $( this ).attr('data-filter');
$container.isotope({ filter: buttonFilter });
});
这个工作得很漂亮,但是搜索功能似乎被破坏了。当我试图在搜索栏中搜索时,没有结果显示。我相信这和比较这部分的搜索值有关:
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope({ filter: qsRegex });
整个javascript: $( function() {
// quick search regex
var qsRegex;
var buttonFilter;
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: '.transition'
});
$('#filters').on( 'click', 'button', function() {
buttonFilter = $( this ).attr('data-filter');
$container.isotope({ filter: buttonFilter });
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope({ filter: qsRegex });
}) );
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
setTimeout( delayed, threshold || 100 );
};
}
我的第一个问题,所以我希望它不是太模糊,试着解释我采取了什么步骤,我认为哪里出了问题。我没有发现将搜索功能与初始过滤器相结合有任何相关问题。
我对同位素一无所知,但从审查您的代码与原始代码相比,似乎更好的方法是将过滤函数从原始代码中保留并适当地触发它。
为了对初始过滤器执行此操作,我将以下代码添加到初始化函数的底部:// "click" the button of the initial filter
var initialFilter = '.transition';
if (initialFilter) {
$('#filters .button[data-filter="' + initialFilter + '"]')
.trigger('click');
}
您没有指定您打算如何初始化过滤器,因此initialFilter
变量只是用来模拟初始过滤器规范。
下面是从原始代码派生出来的完整代码:http://codepen.io/anon/pen/WQboyG