#jquery #html #jquery-ui #checkbox #jquery-filter
#jquery #HTML #jquery-пользовательский интерфейс #флажок #jquery-filter
Вопрос:
В моей оболочке для листинга каждый продукт имеет несколько атрибутов данных, таких как data-baths="3" , data-beds="4" , data-halfbath="12" , data-garages="2" , data-stories="2" , data-price="2" , data-sqft="2567" .
У меня есть флажки, у которых категория, соответствующая значению data-category="value" here, может быть baths/ beds/ halfbath/ garages/ stories/ price/ sqft такой
<input type=’checkbox’ class=’filter’ data-filter=’baths’ value=’1’> 1 Bathroom
<input type=’checkbox’ class=’filter’ data-filter=’beds’ value=’2’> 2 Bedrooms
Поэтому, когда пользователь устанавливает флажки, мне нужно отображать только товары на основе категории.
Проблема в том, что если я выбираю несколько категорий (значения флажков), в нем отсутствуют некоторые критерии и отображаются безусловные данные.
$(".filter").change(function(){
var beds=[],baths=[],halfbaths=[],garages=[],stories=[];
$('.filter').each(function(){
if($(this).is(':checked')){
currentValue=$(this).val();
if($(this).attr('data-filter')==='beds'){
if($.inArray(currentValue, beds) == -1){beds.push(currentValue);}
}
if($(this).attr('data-filter')==='baths'){
if($.inArray(currentValue, baths) == -1){baths.push(currentValue);}
}
if($(this).attr('data-filter')==='halfbath'){
if($.inArray(currentValue, halfbaths) == -1){halfbaths.push(currentValue);}
}
if($(this).attr('data-filter')==='garages'){
if($.inArray(currentValue, stories) == -1){stories.push(currentValue);}
}
if($(this).attr('data-filter')==='stories'){
if($.inArray(currentValue, stories) == -1){stories.push(currentValue);}
}
}
else{
currentValue=$(this).val();
if($(this).attr('data-filter')=='beds'){
beds = $.grep(beds, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='baths'){
baths=$.grep(baths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='halfbath'){
halfbaths=$.grep(halfbaths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='garages'){
garages=$.grep(garages, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='stories'){
stories=$.grep(stories, function(b) {return b != currentValue;});
}
}
});
var bedsselector=[], bathsselector=[], halfbathssselector=[], garagesselector=[], storiessselector=[];
if(beds){
$(beds).each(function(index,value){
bedsselector.push('[data-beds=' value ']');
});
//console.log('.listing-wrap' bedsselector.join(','));
}
if(baths){
$(baths).each(function(index,value){
bathsselector.push('[data-baths=' value ']');
});
//console.log('.listing-wrap' bathsselector.join(','));
}
if(halfbaths){
$(halfbaths).each(function(index,value){
halfbathssselector.push('[data-halfbath=' value ']');
});
//console.log('.listing-wrap' halfbathssselector.join(''));
}
if(garages){
$(garages).each(function(index,value){
garagesselector.push('[data-garages=' value ']');
});
//console.log('.listing-wrap' garagesselector.join(''));
}
if(stories){
$(stories).each(function(index,value){
storiessselector.push('[data-stories=' value ']');
});
//console.log('.listing-wrap' storiessselector.join(''));
}
console.log('.listing-wrap' bedsselector.join(',') bathsselector.join(','));
$(".listing-wrap").hide();
console.log($('.listing-wrap').filter(bathsselector.join()));
$('.listing-wrap' bathsselector.join()).show('slow');
});
clearfilter=function(){
$('.filter').attr('checked',false);
$(".listing-wrap").show("slow");
}
Вот мой HTML:
<div class="col col-sm-3 col-md-3">
<div class="clear_btn_section"><button class="btn btn-default " onclick="clearfilter();">Clear Filter</button></div>
<div class="clearfix clear-fix"></div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i>amp;nbsp;Bedrooms</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="beds" value="1"/> <span> 1 Bedroom</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="2"/> <span> 2 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="3"/> <span> 3 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="4"/> <span> 4 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="5"/> <span> 5 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="6"/> <span> 6 Bedrooms</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i>amp;nbsp;Bathrooms</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="baths"/ value="1"> <span>1 Bathroom</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="2"> <span>2 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="3"> <span>3 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="4"> <span>4 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="5"> <span>5 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="6"> <span>6 Bathrooms</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i>amp;nbsp;Halfbath</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="1"><span> 1 Halfbath</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="2"><span> 2 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="3"><span> 3 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="4"><span> 4 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="5"><span> 5 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="6"><span> 6 Halfbaths</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i>amp;nbsp;Garages</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="garages" value="1"/><span> 1 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="2"/><span> 2 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="3"/><span> 3 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="4"/><span> 4 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="5"/><span> 5 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="6"/><span> 6 Cars</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i>amp;nbsp;Stories</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="stories"/ value="1"><span> 1 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="2"><span> 2 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="3"><span> 3 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="4"><span> 4 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="5"><span> 5 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="6"><span> 6 Stories</span></label>
</div>
</div>
</div>
<div class="clearfix clear-fix"></div>
</div>
<div class="wp-listings-shortcode col col-sm-8 col-md-8">
<div data-baths="3" data-beds="4" data-halfbath="12" data-garages="2" data-stories="2" data-price="2" data-sqft="2567" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Lexington</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">4<span>Beds</span></li>
<li class="baths">3<span>Baths</span></li>
<li class="baths">12<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,567<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">2<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="4" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2701" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Everest</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">4<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,701<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2126" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Fairmont</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,126<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft="3732" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Elkton</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">3,732<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">2<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1784" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Belmont</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">1,784<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1698" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Audrey</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">1,698<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="3" data-stories="1" data-price="" data-sqft="3450" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Aspen</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">3,450<span>Sqft Footage</span></li>
<li class="baths">3<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="3" data-beds="5" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft=" 3718" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Alpine</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">5<span>Beds</span></li>
<li class="baths">3<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">3,718<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">2<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2195" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Alexander</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,195<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="1000" data-sqft="2100" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Camden</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,100<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="4" data-beds="3" data-halfbath="-" data-garages="-" data-stories="-" data-price="100" data-sqft="50" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">model two</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">4<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">50<span>Sqft Footage</span></li>
<li class="baths">-<span>Garages</span></li>
<li class="baths">-<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="-" data-beds="-" data-halfbath="-" data-garages="-" data-stories="-" data-price="" data-sqft="452136" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Model One</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">-<span>Beds</span></li>
<li class="baths">-<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">452,136<span>Sqft Footage</span></li>
<li class="baths">-<span>Garages</span></li>
<li class="baths">-<span>Stories</span></li>
</ul>
</div>
</div>
</div>
Ответ №1:
Я получил решение, и я отвечаю на свой собственный вопрос, потому что эта логика может кому-то помочь.
Обновленный JSFiddle с полностью функциональным кодом.
Другое решение с простым кодом JSFiddle
Вот jQuery:
jQuery(document).ready(function($){
$(".filter").change(function(){
filterData();
});
clearfilter=function(){
$('.filter').attr('checked',false);
$(".listing-wrap").show("slow");
}
filterData=function(){
var beds=[],baths=[],halfbaths=[],garages=[],stories=[];
$('.filter').each(function(){
if($(this).is(':checked')){
currentValue=$(this).val();
if($(this).attr('data-filter')==='beds'){
if($.inArray(currentValue, beds) == -1){beds.push(currentValue);}
}
if($(this).attr('data-filter')==='baths'){
if($.inArray(currentValue, baths) == -1){baths.push(currentValue);}
}
if($(this).attr('data-filter')==='halfbath'){
if($.inArray(currentValue, halfbaths) == -1){halfbaths.push(currentValue);}
}
if($(this).attr('data-filter')==='garages'){
if($.inArray(currentValue, garages) == -1){garages.push(currentValue);}
}
if($(this).attr('data-filter')==='stories'){
if($.inArray(currentValue, stories) == -1){stories.push(currentValue);}
}
}
else{
currentValue=$(this).val();
if($(this).attr('data-filter')=='beds'){
beds = $.grep(beds, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='baths'){
baths=$.grep(baths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='halfbath'){
halfbaths=$.grep(halfbaths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='garages'){
garages=$.grep(garages, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='stories'){
stories=$.grep(stories, function(b) {return b != currentValue;});
}
}
});
console.log("Beds:" beds);
console.log("Baths:" baths);
console.log("Halfbaths:" halfbaths);
console.log("Garages:" garages);
console.log("Stories:" stories);
console.log("-----------------------");
$('.listing-wrap').hide();
$('.listing-wrap').each(function(){
var this_beds=$(this).attr('data-beds');
var this_baths=$(this).attr('data-baths');
var this_halfbaths=$(this).attr('data-halfbath');
var this_garages=$(this).attr('data-garages');
var this_stories=$(this).attr('data-stories');
//console.log(baths.length);
console.log($.inArray(this_beds,beds));
var isbeds=beds.length===0?true:($.inArray(this_beds,beds)>=0);
var isbaths=baths.length===0?true:($.inArray(this_baths,baths)>=0);
var ishalfbaths=halfbaths.length===0?true:($.inArray(this_halfbaths,halfbaths)>=0);
var isgarages=garages.length===0?true:($.inArray(this_garages,garages)>=0);
var isstories=stories.length===0?true:($.inArray(this_stories,stories)>=0);
console.log("Beds:" isbeds ",Baths:" isbaths ",Halfbaths:" ishalfbaths ",Garages:" isgarages ",Stories:" isstories);
console.log("Beds(" this_beds "):" isbeds ",Baths(" this_baths "):" isbaths ",Halfbaths(" this_halfbaths "):" ishalfbaths ",Garages(" this_garages "):" isgarages ",Stories(" this_stories "):" isstories);
var isdisplay=(isbedsamp;amp;isbathsamp;amp;ishalfbathsamp;amp;isgaragesamp;amp;isstories);
console.log("Release=" isdisplay);
console.log("-----");
if((isdisplay)){
$(this).show("slow");
}
//else{
// $(this).hide("slow");
//}
});
}
});
Вот еще одно решение с простым кодом:
$('.filter').change(function() {
var beds = $('[data-filter="beds"]:checked').map(function() {
return '[data-beds="' $(this).val() '"]';
}).get().join(',') || '*';
var baths = $('[data-filter="baths"]:checked').map(function() {
return '[data-baths="' $(this).val() '"]';
}).get().join(',') || '*';
var halfbaths = $('[data-filter="halfbaths"]:checked').map(function() {
return '[data-halfbaths="' $(this).val() '"]';
}).get().join(',') || '*';
var garages = $('[data-filter="garages"]:checked').map(function() {
return '[data-garages="' $(this).val() '"]';
}).get().join(',') || '*';
var stories = $('[data-filter="stories"]:checked').map(function() {
return '[data-stories="' $(this).val() '"]';
}).get().join(',') || '*';
console.log(beds '|' baths '|' halfbaths '|' garages '|' stories);
$('.listing-wrap').hide().filter(beds).filter(baths).filter(halfbaths).filter(garages).filter(stories).show('slow');
});