I'm building a filter for a selection of condos. I've figured out how to filter using a slider and now also need to filter by number of bedrooms using two checkboxes.
<form name="filter" method="post" action="">
<p>Bedrooms
<input id="1bdrm" type="checkbox" value="1bdrm" />1 Bedroom
<input id="2bdrm" type="checkbox" value="2bdrm" />2 Bedroom
</p>
</form>
So far I have the filter limiting the selection to show only 1 bedroom units, but can't figure out how to reset and show all units when unchecking the checkbox.
// Set values for units
$('#cohen').data({
id: 4,
sqft: 976,
bdrms: 2
});
$('#curnoe').data({
id: 5,
sqft: 572,
bdrms: 2
});
$('#richler').data({
id: 6,
sqft: 624,
bdrms: 2
});
$('#carr').data({
id: 7,
sqft: 544,
bdrms: 1
});
$('#lawrence').data({
id: 10,
sqft: 467,
bdrms: 1
});
//filter by number of bedrooms
$(document).ready(function() {
var theValue;
$("#1bdrm").click(function() {
filterItems();
});
});
function filterItems() {
$.each($('.condo-box'), function() {
$this = $(this);
itemData = $this.data();
if (itemData.bdrms == 1) {
$this.show();
itemData.matching = true;
} else {
$this.hide();
itemData.matching = false;
}
});
}
Here's a fiddle link.. http://ift.tt/2zHmmOa I'm using the .data method to store unique attributes on each unit so that i can filter for each attribute (example: I have another script written for a slider that limits condos by sqft.
Hoping the community can point me in the right direction! Thanks in advance.
Marc.
Aucun commentaire:
Enregistrer un commentaire