我有一个使用同位素的页面。它结合了搜索框，多个组合过滤器以及最终的一些排序选项。
我在网上使用了很多例子来结合所有这些并尽可能地删除代码（非常有限的同位素知识）。
两件事 -
首先，如何进一步合并？我目前有3个独立的部分＆＃39;代码。
其次，搜索框独立于组合过滤器工作，当单击过滤器时，搜索框完全停止工作。是否可以在过滤器中包含搜索，例如我可以单击两个过滤器并在搜索中键入一个单词，它会找到与这三个过滤器匹配的任何内容？
以下是所有使用的相关代码 - 任何帮助表示赞赏。
//Init Isotope and set sort options
$( function() {
var $filterDisplay = $('#filter-display');
var $container = $('.results');
$container.isotope({
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
},
itemSelector: '.excerpt-home',
masonry: {
isFitWidth: true
},
getSortData: {
name: '.name',
price: function( itemElem ) {
var price= $( itemElem ).find('.price-prop').text();
return parseFloat( price.replace( /[\(\)]/g, '') );
},
distance: function( itemElem ) {
var distance= $( itemElem ).find('.wppl-address').text();
return parseFloat( distance.replace( /[\(\)]/g, '') );
}
}
});
// sort items on button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
// 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');
});
});
});
var filters = {};
var qsRegex;
$(function(){
$container = $('.results');
// do stuff when checkbox change
$('#options').on( 'change', function( jQEvent ) {
var $checkbox = $( jQEvent.target );
manageCheckbox( $checkbox );
var comboFilter = getComboFilter( filters );
$container.isotope({ filter: comboFilter });
$filterDisplay.text( comboFilter );
});
});
$( function() {
// quick search regex
// init Isotope
var $container = $('.results').isotope({
itemSelector: '.excerpt-home'
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
}, 200 ) );
});
// 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;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
function getComboFilter( filters ) {
var i = 0;
var comboFilters = [];
var message = [];
for ( var prop in filters ) {
message.push( filters[ prop ].join(' ') );
var filterGroup = filters[ prop ];
// skip to next filter group if it doesn't have any values
if ( !filterGroup.length ) {
continue;
}
if ( i === 0 ) {
// copy to new array
comboFilters = filterGroup.slice(0);
} else {
var filterSelectors = [];
// copy to fresh array
var groupCombo = comboFilters.slice(0); // [ A, B ]
// merge filter Groups
for (var k=0, len3 = filterGroup.length; k < len3; k++) {
for (var j=0, len2 = groupCombo.length; j < len2; j++) {
filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
}
}
// apply filter selectors to combo filters for next group
comboFilters = filterSelectors;
}
i++;
}
var comboFilter = comboFilters.join(', ');
return comboFilter;
}
function manageCheckbox( $checkbox ) {
var checkbox = $checkbox[0];
var group = $checkbox.parents('.option-set').attr('data-group');
// create array for filter group, if not there yet
var filterGroup = filters[ group ];
if ( !filterGroup ) {
filterGroup = filters[ group ] = [];
}
// index of
var index = $.inArray( checkbox.value, filterGroup );
if ( checkbox.checked ) {
if ( index === -1 ) {
// add filter to group
filters[ group ].push( checkbox.value );
}
} else {
// remove filter from group
filters[ group ].splice( index, 1 );
}
}
答案 0 :(得分：1)
我遇到了同样的问题并找到了解决方案。要记住的主要事情是传递data-attribute和类，因为过滤器和搜索作为过滤器函数，排序有自己的功能。
我们的项目是按类型，国家，城市，州对所有度假村进行过滤和排序。所以我添加了国家，城市，州和州的课程。对于类别，我添加了度假村类型类别，以确定豪华度假村和常规度假村之间。
var qsRegex;
var buttonFilter;
// init Isotope
var $container = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'vertical',
getSortData: {
country: '.destination-country',
state: '.destination-state',
city: '.destination-city',
resortType: '[data-resort-type]',
typeR: '.destination-type-1',
typeL: '.destination-type-2',
typeAll: '.destination-type-all'
},
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
},
// sort top priority to lowest priority
sortBy: ['resortType', 'country', 'state', 'city']
});
在这里你可以看到我的同位素插件怎么样。
// -------- Filter FUNCTION ----------//
$('.filter-by-button-group').on( 'click', 'button', function() {
buttonFilter = $( this ).attr('data-filter-value');
console.log("Filter button click",buttonFilter);
$container.isotope();
});
// ----------- Search FUNCTION --------//
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
console.log("Search input",qsRegex);
$container.isotope();
}) );
// ------------- Sort FUNCTION -------------//
// bind sort button click
$('.sort-by-button-group').on( 'click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
// make an array of values
sortValue = sortValue.split(',');
console.log("Sorting button click",sortValue);
$container.isotope({
sortBy: ['resortType', sortValue]
});
});
并且还具有去抖动，因此过滤不会每毫秒发生
// 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 );
};
}
我的每个项目的HTML都是这样的
<!-- ----------------------------------start resort item -------------------------------------------------- -->
<li class="destination-list element-item destination-type-all destination-type-1" data-resort-type="destination-type-all destination-type-1">
<div class="resort-details col-sm-2">
<div class="resortImage">
<img class="pull-left resort-img" src="./ResortListing_files/8804623745054.jpg" alt="Marriott's Canyon Villas" title="Marriott's Canyon Villas">
</div>
<div class="resortIcons col-md-12">
<span>
<i class="sr-only">Beach</i>
<img src="ResortListing_files/beach.png"/>
</span>
<span>
<i class="sr-only">Golf</i>
<img src="ResortListing_files/golf.png"/>
</span>
<span>
<i class="sr-only">Ski</i>
<img src="ResortListing_files/Ski.png"/>
</span>
<span>
<i class="sr-only">Theme Park</i>
<img src="ResortListing_files/theme_park.png"/>
</span>
<!--
<span>
<i class="sr-only">Urban</i>
<img src="ResortListing_files/urban.png"/>
</span>
-->
</div>
</div>
<div class="resort-details col-md-7">
<a id="resortNameLink" href="https://st01.owners.marriottvacationclub.com/timeshare/mvco/exploredestination/resorts/resortoverview?resortId=CV" class="resort-name">
Marriott's Newport Coast<sup>®</sup> Villas
</a>
<span class=" fa fa-star-o" style="color: #8B5F10 !important" data-target="#assocTModal" title="Marriott Vacation Regular Resort"></span>
<span class="association assoc-t" data-toggle="modal" data-target="#assocTModal" title="Marriott Vacation Club Trust Resort">
T
</span>
<span class="association assoc-e" data-toggle="modal" data-target="#assocEModal" title="Marriott Vacation Club Exchange Resort">
E
</span>
<div class="resortLocation">
<h2 class="destination-country">USA</h2>
<h4 class="destination-state">California</h4>
<h4 class="destination-city">Newport Coast</h4>
</div>
<p class="productdesc">Elegantly appointed and spacious villas accommodate up to 8 guests. Fitness center, two outdoor heated pools, whirlpool, plus separate children's pool. Sauna, sports court, putting green, and children's activity areas.</p>
</div>
<div class="resort-details actionButton col-md-2">
<!--<img src="http://cache.marriott.com/Images/MiniStores/Brand_Logos.png" />-->
<a href="#" class="resortBrandLogo cym">Court Yard Marriott</a>
<div class="resortListWeather transparent_class">
Weather: <strong>73.1°F</strong>
<img src="http://icons.wxug.com/i/c/k/cloudy.gif" alt="Sunny"/>
</div>
<a href="https://st01.owners.marriottvacationclub.com/timeshare/mvco/exploredestination/resorts/resortoverview?resortId=CV" title="View Marriott's Canyon Villas Resort" class="btn viewResortBtn btn-default" target="_">
<span class="fa fa-arrow-circle-o-right" style="color: #8B5F10 !important" data-target="#assocTModal"></span> View This Resort
</a>
</div>
<div class="clearfix"></div>
</li>
<!--close resort item -->