Javascript 为什么我对jQuery filter（）的使用不起作用
我需要按日期、类型和地点对一些活动进行排序。单击日历中的复选框或日期时，我只希望显示该日期和那些复选框的事件。例如，如果我从日历中选择21，从类型复选框中选择古典，从场地复选框中选择卢卡斯剧院，我希望它只显示21日在卢卡斯举行的经典活动。我想让它隐藏其他一切 但是，仅显示选定内容的my filter（）似乎不起作用。我对filter（）的概念或使用方法是否有误，或者这个问题是否存在其他问题 这是我的jQuery：Javascript 为什么我对jQuery filter（）的使用不起作用,javascript,jquery,Javascript,Jquery,我需要按日期、类型和地点对一些活动进行排序。单击日历中的复选框或日期时，我只希望显示该日期和那些复选框的事件。例如，如果我从日历中选择21，从类型复选框中选择古典，从场地复选框中选择卢卡斯剧院，我希望它只显示21日在卢卡斯举行的经典活动。我想让它隐藏其他一切 但是，仅显示选定内容的my filter（）似乎不起作用。我对filter（）的概念或使用方法是否有误，或者这个问题是否存在其他问题 这是我的jQuery： $(function(){ $('input').attr('check
$(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 );
};
};
});
<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>
选择日期
三月及；2013年4月
s
M
T
W
T
F
s
17
18
19
20
体裁
所有体裁
爵士乐及；忧郁
古典的
美洲人
世界音乐
场馆
所有场馆
特尔费尔艺术学院；科学类
卢卡斯艺术剧院
托管人剧院
查尔斯·H·莫里斯中心
三一联合卫理公会
海船北花园
下午12:30 |查尔斯·H·莫里斯中心
发扬禧年福音的传统，伟大的费尔菲尔德四重奏和金门四重奏
下午12:30 |查尔斯·H·莫里斯中心
发扬禧年福音的传统，伟大的费尔菲尔德四重奏和金门四重奏
下午12:30 |查尔斯·H·莫里斯中心
发扬禧年福音的传统，伟大的费尔菲尔德四重奏和金门四重奏
下午12:30 |查尔斯·H·莫里斯中心
发扬禧年福音的传统，伟大的费尔菲尔德四重奏和金门四重奏
widgets.hide();
for ( var i in values ){
var joined = values[i].join();
var match = widgets.filter(joined);
match.show();
};
widgets.hide();
var match = widgets;
for ( var i in values ){
var joined = values[i].join();
match = match.filter(joined);
};
match.show();