如何使这两种过滤方法同时工作？
如何使这两种过滤方法同时工作？
提问于 2014-07-06 00:16:46
我在做一个搜索功能来搜索一个人的名单。我目前有两种方法可以过滤列表(这是一个数据表)--一种是搜索筛选器，另一种是可用选项的下拉菜单。您可以在这里看到这个：http://cambridgefellows.com/directory-of-fellows/
搜索函数使用以下代码：
$(document).ready(function() {
$('input[name=searchFilterInput]').keyup(function() {
var searchFilterVal = $('input[name=searchFilterInput]').val();
searchFilterVal = searchFilterVal.replace(/ /g, '-');
searchFilterVal = searchFilterVal.toLowerCase();
if(searchFilterVal == '') {
$('tr.hide').fadeIn('slow').removeClass('hide');
} else {
$('tr.fellows').each(function() {
var pattern = $(this).attr('class'); // the pattern to be matched
var match = pattern.match(searchFilterVal);//If pattern matches it returns the match
if(!match) {
$(this).fadeOut('normal').addClass('hide');
} else {
$(this).fadeIn('slow').removeClass('hide');
}
});
}
});
});下拉筛选器使用以下代码：
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter.current').removeClass('current');
$(this).parent().addClass('current');
//var filterVal = $(this).text().toLowerCase().replace(' ','-');
var filterVal = $(this).text();
filterVal = filterVal.replace(/ /g, '-');
filterVal = filterVal.toLowerCase();
if(filterVal == 'all') {
$('tr.hidden').fadeIn('slow').removeClass('hidden');
$('tr.hide').fadeIn('slow').removeClass('hide');
$('#searchFilterID').val('');
} else {
$('tr.fellows').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});我的问题是:我怎样才能让它们一起工作呢？我现在还不明白他们为什么不这样做，我需要能够用一个过滤器过滤列表，然后再用另一个过滤器过滤它。例如，我可能希望使用下拉菜单只选择“公共领导才能酋长国领导倡议研究员中心”研究金，然后通过键入"conf“一词进一步完善我的搜索，将长长的列表缩小到只有Tarig Hilal，后者在重点领域中有”冲突“一词。然而，现在当我开始缩小搜索字段的范围时，下拉筛选器执行的筛选不再影响列表。
我想我理解为什么它不起作用，但我没有任何想法，如何重新安排我的逻辑，使他们一起工作。我想要一些建议！谢谢。
编辑:我从两个过滤器中删除了“filter”函数，并在最初调用每个筛选器时删除了“隐藏”类，从而实现了这一点。它很管用，但以一种非常“眼花缭乱”的方式-有点奇怪。一定有更好的办法。我肯定会珍惜任何建议。
$(document).ready(function() {
$('ul#filter a').click(function() {
$('tr.hidden').fadeIn('slow').removeClass('hidden');
$(this).css('outline','none');
$('ul#filter.current').removeClass('current');
$(this).parent().addClass('current');
//var filterVal = $(this).text().toLowerCase().replace(' ','-');
var filterVal = $(this).text();
filterVal = filterVal.replace(/ /g, '-');
filterVal = filterVal.toLowerCase();
if(filterVal == 'all') {
$('tr.hidden').fadeIn('slow').removeClass('hidden');
$('tr.hide').fadeIn('slow').removeClass('hide');
$('#searchFilterID').val('');
} else {
$('tr.fellows').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
}
});
}
return false;
});
});和
$(document).ready(function() {
$('input[name=searchFilterInput]').keyup(function() {
var searchFilterVal = $('input[name=searchFilterInput]').val();
searchFilterVal = searchFilterVal.replace(/ /g, '-');
searchFilterVal = searchFilterVal.toLowerCase();
$('tr.hide').fadeIn('slow').removeClass('hide');
if(searchFilterVal == '') {
$('tr.hide').fadeIn('slow').removeClass('hide');
} else {
$('tr.fellows').each(function() {
var pattern = $(this).attr('class'); // the pattern to be matched
var match = pattern.match(searchFilterVal);//If pattern matches it returns the match
if(!match) {
$(this).fadeOut('normal').addClass('hide');
} else {
}
});
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-06 00:23:25
让其中一个过滤器方法调用另一个过滤器，提供必要的参数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24591628
复制相关文章
相似问题
腾讯云开发者
