javascript - 如何使用 jquery 保持两个过滤器处于活动状态?
问题描述
我正在尝试过滤列部门和位置的表格。这些过滤器一次一个地工作。
我对如何使两个过滤器同时工作一无所知。
例如,如果我需要使用“纽约”位置过滤所有“工程”部门。如何让代码记住并同时应用两个过滤器?谢谢您的帮助。
//function to filter the departments based on selection
function filterTextDept() {
var rexD = new RegExp($('#filterTextDept').val());
if (rexD == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rexD.test($(this).text());
}).show();
}
}
function clearFilter() {
$('#filterTextDept').val('');
$('.content').show();
}
//function to filter the locations based on selection
function filterTextLoc() {
var rexL = new RegExp($('#filterTextLoc').val());
if (rexL == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rexL.test($(this).text());
}).show();
}
}
function clearFilter() {
$('#filterTextLoc').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title></title>
</head>
<body>
<select id="filterTextDept" onchange="filterTextDept()">
<option disabled="disabled" selected="selected">Filter by Department</option>
<option value="Compliance">Compliance</option>
<option value="Data Science">Data Science</option>
<option value="Engineering">Engineering</option>
<option value="Growth">Growth</option>
<option value="Product Management">Product Management</option>
<option value="Sales">Sales</option>
<option value="all">All</option>
</select>
<select id="filterTextLoc" onchange="filterTextLoc()">
<option disabled="disabled" selected="selected">Filter by Location</option>
<option value="New York">New York</option>
<option value="Chennai">Chennai</option>
<option value="San Francisco">San Francisco</option>
<option value="San Diego">San Diego</option>
<option value="Remote">Remote</option>
<option value="all">All</option>
</select>
<table id="jobTable" class="table table-bordered table-striped table-hover table-list-search">
<tbody>
<tr>
<th>Job Title</th>
<th>Department</th>
<th>Location</th>
<th></th>
</tr>
<tr class="content">
<td>Account Manager</td>
<td>Growth</td>
<td>New York</td>
<td>
<a href="Account%20Manager">Link</a>
</td>
</tr>
<tr class="content">
<td>Associate Account Manager</td>
<td>Growth</td>
<td>New York</td>
<td>
<a href="Associate%20Account%20Manager">Link</a>
</td>
</tr>
<tr class="content">
<td>Director, Account Executive</td>
<td>Sales</td>
<td>New York</td>
<td>
<a href="Director,%20Account%20Executive">Link</a>
</td>
</tr>
<tr class="content">
<td>Director, Account Executive</td>
<td>Sales</td>
<td>San Diego</td>
<td>
<a href="Director,%20Account%20Executive">Link</a>
</td>
</tr>
<tr class="content">
<td>Director, Account Executive</td>
<td>Sales</td>
<td>San Francisco or Remote</td>
<td>
<a href="Director,%20Account%20Executive">Link</a>
</td>
</tr>
<tr class="content">
<td>Director of Engineering</td>
<td>Engineering</td>
<td>New York</td>
<td>
<a href="Director%20of%20Engineering">Link</a>
</td>
</tr>
<tr class="content">
<td>Director of Product Management, Fraud Risk</td>
<td>Product Management</td>
<td>New York</td>
<td>
<a href="Director%20of%20Product%20Management,%20Fraud%20Risk">Link</a>
</td>
</tr>
<tr class="content">
<td>Director of Strategic Alliances</td>
<td>Sales</td>
<td>San Diego</td>
<td>
<a href="Director%20of%20Strategic%20Alliances">Link</a>
</td>
</tr>
<tr class="content">
<td>Head of Solution Consulting</td>
<td>Growth</td>
<td>San Diego, New York or Remote</td>
<td>
<a href="Head%20of%20Solution%20Consulting">Link</a>
</td>
</tr>
<tr class="content">
<td>IT Risk and Compliance Officer</td>
<td>Compliance</td>
<td>New York</td>
<td>
<a href="IT%20Risk%20and%20Compliance%20Officer">Link</a>
</td>
</tr>
<tr class="content">
<td>Lead Data Scientist</td>
<td>Data Science</td>
<td>New York or Remote</td>
<td>
<a href="Lead%20Data%20Scientist">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Data Engineer</td>
<td>Data Science</td>
<td>New York or Remote</td>
<td>
<a href="Senior%20Data%20Engineer">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Data Scientist</td>
<td>Data Science</td>
<td>New York or Remote</td>
<td>
<a href="Senior%20Data%20Scientist">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Product Manager, Document Verification</td>
<td>Product Management</td>
<td>New York</td>
<td>
<a href="Senior%20Product%20Manager,%20Document%20Verification">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Software Engineer</td>
<td>Engineering</td>
<td>Chennai</td>
<td>
<a href="Senior%20Software%20Engineer">Link</a>
</td>
</tr>
<tr class="content">
<td>Software Engineer (All Levels)</td>
<td>Engineering</td>
<td>New York or Remote (East Coast)</td>
<td>
<a href="Software%20Engineer%20(All%20Levels)">Link</a>
</td>
</tr>
<tr class="content">
<td>Solution Consultant</td>
<td>Growth</td>
<td>San Francisco or New York</td>
<td>
<a href="Solution%20Consultant">Link</a>
</td>
</tr>
<tr class="content">
<td>Staff Software Engineer - Chennai</td>
<td>Engineering</td>
<td>Chennai</td>
<td>
<a href="Staff%20Software%20Engineer%20-%20Chennai">Link</a>
</td>
</tr>
<tr class="content">
<td>Staff Software Engineer - Core Platform</td>
<td>Engineering</td>
<td>New York or Remote (East Coast)</td>
<td>
<a href="Staff%20Software%20Engineer%20-%20Core%20Platform">Link</a>
</td>
</tr>
</tbody>
</table></body>
</html>
解决方案
我试图尽可能少地修改你的代码。您非常接近解决方案我的方法是每次都运行所有过滤器。
编辑
您可以检查显示的行数$('.content:visible').length
function updateFilters () {
clearFilter()
filterTextDept()
filterTextLoc()
postFilter()
}
function postFilter() {
$visibleLinesCount = $('.content:visible').length
if ($visibleLinesCount === 0) {
// here your logic when no result
console.log('no result')
} else if ($visibleLinesCount === 1) {
console.log('only one result')
} else {
console.log($visibleLinesCount + ' results')
}
}
//function to filter the departments based on selection
function filterTextDept() {
var rexD = new RegExp($('#filterTextDept').val());
if (!$('#filterTextDept').val()) {
// nothing selected
return;
} else if (rexD == "/all/") {
return;
} else {
//$('.content').hide();
$('.content').filter(function() {
return !rexD.test($(this).text());
}).hide();
}
}
//function to filter the locations based on selection
function filterTextLoc() {
var rexL = new RegExp($('#filterTextLoc').val());
if (!$('#filterTextLoc').val()) {
// nothing selected
return;
} else if (rexL == "/all/") {
return;
} else {
//$('.content').hide();
$('.content').filter(function() {
return !rexL.test($(this).text());
}).hide();
}
}
function clearFilter() {
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title></title>
</head>
<body>
<select id="filterTextDept" onchange="updateFilters()">
<option disabled="disabled" selected="selected">Filter by Department</option>
<option value="Compliance">Compliance</option>
<option value="Data Science">Data Science</option>
<option value="Engineering">Engineering</option>
<option value="Growth">Growth</option>
<option value="Product Management">Product Management</option>
<option value="Sales">Sales</option>
<option value="all">All</option>
</select>
<select id="filterTextLoc" onchange="updateFilters()">
<option disabled="disabled" selected="selected">Filter by Location</option>
<option value="New York">New York</option>
<option value="Chennai">Chennai</option>
<option value="San Francisco">San Francisco</option>
<option value="San Diego">San Diego</option>
<option value="Remote">Remote</option>
<option value="all">All</option>
</select>
<table id="jobTable" class="table table-bordered table-striped table-hover table-list-search">
<tbody>
<tr>
<th>Job Title</th>
<th>Department</th>
<th>Location</th>
<th></th>
</tr>
<tr class="content">
<td>Account Manager</td>
<td>Growth</td>
<td>New York</td>
<td>
<a href="Account%20Manager">Link</a>
</td>
</tr>
<tr class="content">
<td>Associate Account Manager</td>
<td>Growth</td>
<td>New York</td>
<td>
<a href="Associate%20Account%20Manager">Link</a>
</td>
</tr>
<tr class="content">
<td>Director, Account Executive</td>
<td>Sales</td>
<td>New York</td>
<td>
<a href="Director,%20Account%20Executive">Link</a>
</td>
</tr>
<tr class="content">
<td>Director, Account Executive</td>
<td>Sales</td>
<td>San Diego</td>
<td>
<a href="Director,%20Account%20Executive">Link</a>
</td>
</tr>
<tr class="content">
<td>Director, Account Executive</td>
<td>Sales</td>
<td>San Francisco or Remote</td>
<td>
<a href="Director,%20Account%20Executive">Link</a>
</td>
</tr>
<tr class="content">
<td>Director of Engineering</td>
<td>Engineering</td>
<td>New York</td>
<td>
<a href="Director%20of%20Engineering">Link</a>
</td>
</tr>
<tr class="content">
<td>Director of Product Management, Fraud Risk</td>
<td>Product Management</td>
<td>New York</td>
<td>
<a href="Director%20of%20Product%20Management,%20Fraud%20Risk">Link</a>
</td>
</tr>
<tr class="content">
<td>Director of Strategic Alliances</td>
<td>Sales</td>
<td>San Diego</td>
<td>
<a href="Director%20of%20Strategic%20Alliances">Link</a>
</td>
</tr>
<tr class="content">
<td>Head of Solution Consulting</td>
<td>Growth</td>
<td>San Diego, New York or Remote</td>
<td>
<a href="Head%20of%20Solution%20Consulting">Link</a>
</td>
</tr>
<tr class="content">
<td>IT Risk and Compliance Officer</td>
<td>Compliance</td>
<td>New York</td>
<td>
<a href="IT%20Risk%20and%20Compliance%20Officer">Link</a>
</td>
</tr>
<tr class="content">
<td>Lead Data Scientist</td>
<td>Data Science</td>
<td>New York or Remote</td>
<td>
<a href="Lead%20Data%20Scientist">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Data Engineer</td>
<td>Data Science</td>
<td>New York or Remote</td>
<td>
<a href="Senior%20Data%20Engineer">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Data Scientist</td>
<td>Data Science</td>
<td>New York or Remote</td>
<td>
<a href="Senior%20Data%20Scientist">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Product Manager, Document Verification</td>
<td>Product Management</td>
<td>New York</td>
<td>
<a href="Senior%20Product%20Manager,%20Document%20Verification">Link</a>
</td>
</tr>
<tr class="content">
<td>Senior Software Engineer</td>
<td>Engineering</td>
<td>Chennai</td>
<td>
<a href="Senior%20Software%20Engineer">Link</a>
</td>
</tr>
<tr class="content">
<td>Software Engineer (All Levels)</td>
<td>Engineering</td>
<td>New York or Remote (East Coast)</td>
<td>
<a href="Software%20Engineer%20(All%20Levels)">Link</a>
</td>
</tr>
<tr class="content">
<td>Solution Consultant</td>
<td>Growth</td>
<td>San Francisco or New York</td>
<td>
<a href="Solution%20Consultant">Link</a>
</td>
</tr>
<tr class="content">
<td>Staff Software Engineer - Chennai</td>
<td>Engineering</td>
<td>Chennai</td>
<td>
<a href="Staff%20Software%20Engineer%20-%20Chennai">Link</a>
</td>
</tr>
<tr class="content">
<td>Staff Software Engineer - Core Platform</td>
<td>Engineering</td>
<td>New York or Remote (East Coast)</td>
<td>
<a href="Staff%20Software%20Engineer%20-%20Core%20Platform">Link</a>
</td>
</tr>
</tbody>
</table></body>
</html>
推荐阅读
- java - 为什么java字符串方法返回null作为字符串?
- html - 将电子邮件按钮链接到实际电子邮件
- vue.js - Quasar 换行符正在打印而
不是换行符 - plsql - Oracle 11g PLSQL - 随着时间的推移将记录拆分为组成记录 - 行生成
- javascript - 执行顺序是什么?jQuery: $(document).ready(function () { }); $(window).on('load', function () { })
- python - 使用 aif360 包进行偏差缓解时出错
- dart - 飞镖渡槽错误:未找到:'dart:html'
- stm32 - 忙等待时中断的好处?
- python - 列表中每个元组的输出格式
- go - 在同一台机器上需要 2 个进程的 IPC 解决方案