In my listing wrapper each product has multiple data-attributes like data-baths="3", data-beds="4", data-halfbath="12", data-garages="2", data-stories="2", data-price="2", data-sqft="2567".
I have checkboxes that has a category corresponding to the data-category="value" here value may be baths/ beds/ halfbath/ garages/ stories/ price/ sqft like
<input type=’checkbox’ class=’filter’ data-filter=’baths’/ value=’1’> 1 Bathroom
<input type=’checkbox’ class=’filter’ data-filter=’beds’/ value=’2’> 2 Bedrooms
So when a user selects checkboxes I need to only display the products based on the category.
Problem is, if I choose multiple categories (checkbox values) it is missing some criteria and displaying unconditional data.
$(".filter").change(function(){
filterData($(this).attr('data-filter'),$(this).val());
});
var beds=[],baths=[],halfbaths=[],garages=[],stories=[];
filterData=function(currentFlag,crurrentFlagValue){
$('.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=[];
var bathsselector=[];
var halfbathssselector=[];
var garagesselector=[];
var 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();
//$(".listing-wrap"+bedsselector.join(',')+bathsselector.join(',')).show("slow");
//$('[myc="blue"]').filter('[myid="1"],[myid="2"]');
console.log('.listing-wrap[data-'+currentFlag+'='+crurrentFlagValue+']');
console.log($('.listing-wrap').filter(bathsselector.join()));
$('.listing-wrap[data-'+currentFlag+'='+crurrentFlagValue+']').filter(bathsselector.join()).show('slow');
}
Here is my HTML:
<br/><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> 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> 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> 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> 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> 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 class="wp-listings-shortcode"><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"><div class="listing-widget-thumb"><a data-post-id="1115" href="http://localhost:8081/robinsonproperties/models/lexington/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/homee1-300x200.jpg"></a><div class="listing-thumb-meta"><span class="listing-text">Base Price</span><span class="listing-price">$2</span></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/lexington/">Lexington</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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 "><div class="listing-widget-thumb"><a data-post-id="1113" href="http://localhost:8081/robinsonproperties/models/everest/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/alexander-300x159.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/everest/">Everest</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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 "><div class="listing-widget-thumb"><a data-post-id="1111" href="http://localhost:8081/robinsonproperties/models/fairmont/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/image-2-300x142.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/fairmont/">Fairmont</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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"><div class="listing-widget-thumb"><a data-post-id="1109" href="http://localhost:8081/robinsonproperties/models/elkton/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/Aspen-300x143.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/elkton/">Elkton</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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 "><div class="listing-widget-thumb"><a data-post-id="1107" href="http://localhost:8081/robinsonproperties/models/belmont/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/images-300x168.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/belmont/">Belmont</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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 "><div class="listing-widget-thumb"><a data-post-id="1105" href="http://localhost:8081/robinsonproperties/models/audrey/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/andry-300x160.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/audrey/">Audrey</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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"><div class="listing-widget-thumb"><a data-post-id="1103" href="http://localhost:8081/robinsonproperties/models/aspen/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/Aspen-300x143.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/aspen/">Aspen</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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 "><div class="listing-widget-thumb"><a data-post-id="1101" href="http://localhost:8081/robinsonproperties/models/alpine/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/image-300x130.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/alpine/">Alpine</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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 "><div class="listing-widget-thumb"><a data-post-id="1099" href="http://localhost:8081/robinsonproperties/models/alexander/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/images-300x168.jpg"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/alexander/">Alexander</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><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"><div class="listing-widget-thumb"><a data-post-id="988" href="http://localhost:8081/robinsonproperties/models/camden/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-content/uploads/2016/08/Aspen-300x143.jpg"></a><div class="listing-thumb-meta"><span class="listing-text">Base Price</span><span class="listing-price">$1,000</span></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/camden/">Camden</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><div data-baths="4" data-beds="3" data-halfbath="-" data-garages="-" data-stories="-" data-price="100" data-sqft="50" class="listing-wrap one-third "><div class="listing-widget-thumb"><a data-post-id="403" href="http://localhost:8081/robinsonproperties/models/model-two/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-includes//images/upload-empty.png"></a><div class="listing-thumb-meta"><span class="listing-text">Base Price</span><span class="listing-price">$100</span></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/model-two/">model two</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --><div data-baths="-" data-beds="-" data-halfbath="-" data-garages="-" data-stories="-" data-price="" data-sqft="452136" class="listing-wrap one-third "><div class="listing-widget-thumb"><a data-post-id="400" href="http://localhost:8081/robinsonproperties/models/model-one/" class="listing-image-link"> <img src="http://localhost:8081/robinsonproperties/wp-includes//images/upload-empty.png"></a><div class="listing-thumb-meta"></div><!-- .listing-thumb-meta --></div><!-- .listing-widget-thumb --><div class="listing-widget-details"><h3 class="listing-title"><a href="http://localhost:8081/robinsonproperties/models/model-one/">Model One</a></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><!-- .listing-widget-details --></div><!-- .listing-wrap --></div>
Aucun commentaire:
Enregistrer un commentaire