I need to sort some events by date, genre and venue. When a checkbox or a date from the calendar is clicked, I want to only be shown events for that date and those checkboxex. For example, if I choose 21 from calendar, classical from genre checkboxes and Lucas theatre from venue checkbox, I want it to show me only the events on 21st which are in Lucas and are classical. And I want it to hide everything else.
However, my filter() to show only the selected stuff seems to not be working. Am I wrong on the concept of the filter() or my use of it, or isthe problem something else?
This is my jQuery:
$(function(){
$('input').attr('checked', false);
$('label.check').click(function(){
if( $(this).find('input').is(':checked') ){
$(this).find('input').attr('checked', false);
$(this).removeClass('checked');
} else {
$(this).find('input').attr('checked', true);
$(this).addClass('checked');
}
$(this).find('input').trigger('change');
return false;
});
$('label.check, .calendar a').click(function(){
$(this).toggleClass('active');
filtering();
return false;
});
function filtering(){
var values = {}
$('.search-options').each(function(){
var attr_name = $(this).attr('name');
var check_value = $(this).find('input:checked');
var date_text = $(this).find('.calendar a.active');
values[attr_name] = [];
check_value.each(function(){
values[attr_name].push('' + attr_name + '="' + $(this).val() + '"');
});
date_text.each(function(){
values[attr_name].push('' + attr_name + '="' + $(this).text() + '"');
});
})
for ( var i in values ){
var joined = values[i].join()
var match = $('.widget.left').filter(joined);
match.show()
console.log( match );
};
};
});
This is my HTML it is about:
<div class="dd">
<div class="concerts check-group">
<form action="" method="post">
<div class="search-options left" name="date">
<h3>Select Dates</h3>
<div class="calendar-title">
<h4>March & April 2013</h4>
</div>
<div class="calendar">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>s</th>
<th>m</th>
<th>t</th>
<th>w</th>
<th>t</th>
<th>f</th>
<th>s</th>
</tr>
<tr>
<td class="disabled">17</td>
<td class="disabled">18</td>
<td class="disabled">19</td>
<td class="disabled">20</td>
<td><a href="#">21</a></td>
<td><a href="#">22</a></td>
<td><a href="#">23</a></td>
</tr>
<tr>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
</tr>
<tr>
<td><a href="#">31</a></td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
<td><a href="#">6</a></td>
</tr>
</table>
</div>
</div>
<div class="search-options left" name="genre">
<h3>genre</h3>
<div class="labels genre-vals">
<label class="check">
<span></span>
<input type="checkbox" class="checkfield all-check" value="all" checked="checked" />
All genres
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="jazz-and-blues" checked="checked" />
jazz & Blues
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="classical" checked="checked" />
Classical
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="americana" checked="checked" />
Americana
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="world-music" checked="checked" />
World Music
</label>
</div>
</div>
<div class="search-options wide right venue-vals" name="venue">
<h3>venues</h3>
<div class="col">
<div class="labels">
<label class="check">
<span></span>
<input type="checkbox" class="checkfield all-check" value="all" checked="checked" />
All venues
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="telfair" checked="checked" />
Telfair Academy of Arts & Science
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="lucas" checked="checked" />
Lucas Theatre for the Arts
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="trustees" checked="checked" />
Trustees Theater
</label>
</div>
</div>
<div class="col">
<div class="labels">
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="charles" checked="checked" />
Charles H. Morris Center
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="trinity" checked="checked" />
Trinity United Methodist Church
</label>
<label class="check">
<span></span>
<input type="checkbox" class="checkfield" value="ships" checked="checked" />
Ships of the Sea North Garden
</label>
</div>
</div>
<div class="cl"> </div>
</div>
<div class="cl"> </div>
</form>
</div>
</div>
<!-- end dropdown -->
<!-- widgets -->
<div class="events result-list">
<div class="widget left" date="22" genre="classical" venue="telfair">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="22" genre="jazz-and-blues" venue="lucas">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="22" genre="americana" venue="charles">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="23" genre="world-music" venue="telfair">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="23" genre="classical" venue="trustees">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="24" genre="americana" venue="ships">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="24" genre="classical" venue="lucas">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="25" genre="jazz-and-blues" venue="trinity">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="26" genre="jazz-and-blues" venue="charles">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="26" genre="classical" venue="telfair">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="26" genre="world-music" venue="charles">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="27" genre="americana" venue="trinity">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="27" genre="classical" venue="lucas">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="28" genre="jazz-and-blues" venue="ships">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="28" genre="classical" venue="ships">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="29" genre="world-music" venue="telfair">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="29" genre="americana" venue="trustees">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="30" genre="classical" venue="trustees">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="30" genre="world-music" venue="charles">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="31" genre="jazz-and-blues" venue="lucas">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="31" genre="world-music" venue="trustees">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="1" genre="classical" venue="ships">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="2" genre="classical" venue="lucas">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="2" genre="jazz-and-blues" venue="trinity">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="3" genre="classical" venue="charles">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="4" genre="jazz-and-blues" venue="telfair">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="5" genre="classical" venue="telfair">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
<div class="widget left" date="6" genre="americana" venue="ships">
<a href="#">
<span class="date">THUR 3/21</span>
<img src="css/images/photo05.jpg" alt="" id="image1" />
</a>
<div class="widget-cnt">
<h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
<p>12:30 pm | Charles H. Morris Center</p>
<p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
<div class="widget-links">
<a href="#">read more</a>
<a href="#">buy tickets</a>
</div>
</div>
</div>
</div>
I change attribute selector as Bergi mentioned and change this code (OR filtering):
Demo: http://jsfiddle.net/tZyWa/
OR (AND filtering):
Demo: http://jsfiddle.net/tZyWa/1/