同位素过滤器 + 重置搜索
isotope filters + search with reset
我正在尝试让我的同位素网格在重置后工作,所有过滤器和搜索都将被清除,并且一切都恢复到任何交互之前的原始状态。
到目前为止,事情在一定程度上得到了解决,但是,"li" 元素的 "active" 状态不起作用 - 另外,我不喜欢我必须做些什么才能至少达到这一点...复制代码,有没有更好的方法来处理这一切?
我现在遇到的问题是,如果我将网格默认设置为 "ALL",然后我在搜索字段中输入文本,然后 select 过滤器,当我重置后,活动状态会保留在我 select 编辑的过滤器上,而当它不应该时,它应该返回到其默认的 "ALL" 过滤器。希望我解释得足够好:/
如有任何帮助,我们将不胜感激。
JS:
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
});
$('.directory_search input[type="search"]').keyup(function() {
$('.directory_search_reset').show();
});
============================================= ==============================
编辑
终于想出了如何实现我所寻求的。这是下面的代码:
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
**$('li').removeClass('active'); //ADDED
$('li:first-of-type').addClass('active'); //ADDED**
});
//show reset icon once input field has been typed in
$('.directory_search input[type="search"]').keyup(function() {
$('.directory_search_reset').show();
});
现在我的问题是:有没有办法缩短所有这些代码?现在,我已经复制了大部分内容,因为它需要在 .directory_search_reset
函数下工作......但我觉得应该有一种方法可以缩短所有这些。这可能吗?
因为我至少弄清楚了如何完成我最初的问题,这里是为那些遇到相对相同(或相同)问题的人提供的答案:
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
$('li').removeClass('active'); //ADDED
$('li:first-of-type').addClass('active'); //ADDED
});
//show reset icon once input field has been typed in
$('.directory_search input[type="search"]').keyup(function() {
$('.directory_search_reset').show();
});
我找到了避免复制您的代码的解决方案。
当在您的输入中检测到 keyup 时,将触发过滤。
所以你只需要添加一行代码来模拟那个。
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
$('.directory_search input[type="search"]').keyup();
})
我正在尝试让我的同位素网格在重置后工作,所有过滤器和搜索都将被清除,并且一切都恢复到任何交互之前的原始状态。
到目前为止,事情在一定程度上得到了解决,但是,"li" 元素的 "active" 状态不起作用 - 另外,我不喜欢我必须做些什么才能至少达到这一点...复制代码,有没有更好的方法来处理这一切?
我现在遇到的问题是,如果我将网格默认设置为 "ALL",然后我在搜索字段中输入文本,然后 select 过滤器,当我重置后,活动状态会保留在我 select 编辑的过滤器上,而当它不应该时,它应该返回到其默认的 "ALL" 过滤器。希望我解释得足够好:/
如有任何帮助,我们将不胜感激。
JS:
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
});
$('.directory_search input[type="search"]').keyup(function() {
$('.directory_search_reset').show();
});
============================================= ==============================
编辑
终于想出了如何实现我所寻求的。这是下面的代码:
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
**$('li').removeClass('active'); //ADDED
$('li:first-of-type').addClass('active'); //ADDED**
});
//show reset icon once input field has been typed in
$('.directory_search input[type="search"]').keyup(function() {
$('.directory_search_reset').show();
});
现在我的问题是:有没有办法缩短所有这些代码?现在,我已经复制了大部分内容,因为它需要在 .directory_search_reset
函数下工作......但我觉得应该有一种方法可以缩短所有这些。这可能吗?
因为我至少弄清楚了如何完成我最初的问题,这里是为那些遇到相对相同(或相同)问题的人提供的答案:
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('.directory_menu ul').on( 'click', 'li', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}));
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
$('li').removeClass('active'); //ADDED
$('li:first-of-type').addClass('active'); //ADDED
});
//show reset icon once input field has been typed in
$('.directory_search input[type="search"]').keyup(function() {
$('.directory_search_reset').show();
});
我找到了避免复制您的代码的解决方案。 当在您的输入中检测到 keyup 时,将触发过滤。 所以你只需要添加一行代码来模拟那个。
// RESETTING
$('.directory_search_reset').on('click', function() {
//hide reset button
$('.directory_search_reset').hide();
//clear search field
$('.directory_search input[type="search"]').val('');
$('.directory_search input[type="search"]').keyup();
})